WXML:
hotrecommend 是接口返回的数组
<view class="helpYouPick" wx:if='{{hotrecommend.length > 0}}'>
<view class='title'>热门推荐</view>
<view class="pick_list">
<scroll-view class="scroll-view_H" scroll-x>
<view
bindtap="routerview"
class="pick_item_wrap"
wx:for="{{hotrecommend}}"
wx:key="index"
data-choiceType='{{item.choice_type}}'
data-cityId='{{item.city_id}}'
data-topicCtn='{{item.topic_content}}'
data-topicType='{{item.topic_type}}'
data-condition='{{item.condition}}'
data-targeturl='{{item.targeturl}}'
data-path='hotrecommend'
data-index='{{index}}'
data-title='{{item.title}}'
>
<view class="pick_image_wrap">
<image src="{{item.imgurl}}"></image>
<view class="title">{{item.title}}</view>
<view class="title sub_title">{{item.sub_title}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
接口:
js跳转:
routerview:function(e){
if(path == 'hotrecommend'){
var choicetype = e.currentTarget.dataset.choicetype;
var listparam = e.currentTarget.dataset.topictype;
console.log(choicetype, listparam)
if (choicetype == 2){ //这是根据条件 跳转小程序的,
var condition = JSON.stringify(e.currentTarget.dataset.condition);
url = "./sale/sale?cityId=" + cityid + "&condition=" + condition
}else{
//跳转 H5页面
var targeturl = JSON.stringify(e.currentTarget.dataset.targeturl);
targeturl = encodeURIComponent(targeturl)
url = './webview/webview?url=' + targeturl
}
}
wx.navigateTo({
url: url,
})
}
WXSS
.helpYouPick .title,.communitytest .title{
padding:60rpx 40rpx 42rpx;
height:40rpx;
font-size:21px;
color:rgba(41,43,51,1);
line-height:20px;
font-weight: bold;
}
.pick_list{
width:100%;
height: 350rpx;
}
.scroll-view_H{
/* width:100%; */
white-space: nowrap;
height:350rpx;
display:flex;
/* align-items:flex-start; */
/* justify-content: space-between; */
}
.scroll-view_H .pick_item_wrap:nth-child(1){
margin-left:40rpx;
}
.community_list .pick_item_wrap:nth-child(1){
margin-left:0rpx;
}
.community_total{
margin-left:40rpx;
width:300rpx;
height:auto;
display: inline-block;
/* background:red; */
margin-right:24rpx;
position: relative;
}
.pick_item_wrap{
width:300rpx;
height:312rpx;
display: inline-block;
margin-right:24rpx;
box-shadow:0px 12rpx 30rpx 0px rgba(0, 0, 0, 0.06);
border-radius:16px;
overflow: hidden;
}
.pick_item_wrap image{
width:300rpx;
height:199rpx;
border-radius:16px 16px 0px 0px;
}
.pick_item_wrap .title{
height:30rpx;
font-size: 30rpx;
padding:0 25rpx;
color:#292B33;
margin-top: 10rpx;
}
.pick_item_wrap .sub_title{
font-size: 12px;
color:#9D9DA1;
}
.socer{
padding:0 25rpx;
font-size: 12px;
margin-top: 8rpx;
display:flex;
}
.star_wrap{
display:flex;
margin-left:14rpx;
}
.socer image{
width:18rpx;
height:18rpx;
margin-right:1px;
/* float:left; */
}
效果:点击跳转,左右可以滑动
H5页面 跳回小程序 的实例:
<a οnclick="saleMiniProgramDetail('12323houseid','2323brokerid');launchSecondHouseDetailAction('12323houseid','2323brokerid')">按钮</a>
//h5点击事件
var t = {动态值} //t 等于1 的时候是h5
var isiOS = !!u.match(/(iphone|ipod|ipad|mac)/i);
function launchSecondHouseDetailAction(houseid, cityid) {
if(t == 1){ //H5
location.href = '<?=RESOURCES_M_B.$cityDomain?>'+'/ershoufang/' + houseid + '.html';
return;
}
if(isiOS){
launchSecondHouseDetailActionWithCallBack(houseid, cityid);
}else{ //android
window.android.launchSecondHouseDetailActionWithCallBack(houseid, cityid);
}
}
//打开小程序 事件
function saleMiniProgramDetail(housesid,cityid){ //带参数
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
if(res.miniprogram){ //(点击事件先判断是否是小程序打开的H5页面,如果是,就跳回小程序指定的页面)
wx.miniProgram.navigateTo({url: '../sale_detail/sale_detail?houseId=' + housesid + '&cityId=' + cityid})
}
})
}
官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
这样就可以正常打开小程序了
感谢大家的支持,小弟有帮到大家的,可以帮忙 点赞 和关注