怎么在菜单选择小程序的页面

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

在对应的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;}

了解更多怎么在菜单选择小程序的页面相关的解答，就上多想派（www.duoxiangpai.com）。