ADADADADAD

怎么在菜单选择小程序的页面[ 建站问答 ]

建站问答时间：2024-12-01 19:18:23

作者：文/会员上传

幻兽帕鲁孵化器制作在哪里

简介：

在菜单选择小程序页面的案例：在对应的wxml文件，添加以下代码：<viewclass='topTabSwiper'><viewclass='tab{{currentData==0?"tabBorer":""}}'data-current="0"

以下为本文的正文内容，内容仅供参考！本站为公益性网站，复制本文以及下载DOC文档全部免费。

在菜单选择小程序页面的案例：

在对应的wxml文件，添加以下代码：


<viewclass='topTabSwiper'>
<viewclass='tab{{currentData==0?"tabBorer":""}}'data-current="0"bindtap='checkCurrent'>推荐</view>
<viewclass='tab{{currentData==1?"tabBorer":""}}'data-current="1"bindtap='checkCurrent'>热点</view>
<viewclass='tab{{currentData==2?"tabBorer":""}}'data-current="2"bindtap='checkCurrent'>关注</view>
</view>
<swipercurrent="{{currentData}}"class='swiper'style="height:600px;"duration="300"bindchange="bindchange">
<swiper-item><viewclass='swiper_con'>这是个推荐页面</view>
</swiper-item>
<swiper-item><viewclass='swiper_con'>这是个热点页面</view>
<buttontype='primary'bindtap='ReDian'>热点进入</button>
</swiper-item>
<swiper-item><viewclass='swiper_con'>这是个关注页面</view></swiper-item>
</swiper>

在对应的js文件，添加以下代码：


data:{
currentData:0,
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
},
//获取当前滑块的index
bindchange:function(e){
constthat=this;
that.setData({
currentData:e.detail.current
})
},
//点击切换，滑块index赋值
checkCurrent:function(e){
constthat=this;
if(that.data.currentData===e.target.dataset.current){
returnfalse;
}else{
that.setData({
currentData:e.target.dataset.current
})
}
}

在对应的wxss文件，添加以下代码：


.tab{float:left;width:33.3333%;text-align:center;padding:10rpx0;}
.topTabSwiper{border-top:1pxsolid#ccc;border-bottom:1pxsolid#ccc;zoom:1;}
.topTabSwiper:after{content:"";clear:both;display:block;}
.tabBorer{border-bottom:1pxsolid#f00;color:#f00;}
.swiper{width:100%;}
.swiper_con{text-align:center;width:100%;height:50%;padding:80rpx0;}