温馨提示×

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

小新
140
2020-12-10 09:17:03
栏目: 云计算
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

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

在对应的wxml文件,添加以下代码:

<view class='topTabSwiper'>

<view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>

<view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view>

<view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>

</view>

<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">

<swiper-item><view class='swiper_con'>这是个推荐页面</view>

</swiper-item>

<swiper-item><view class='swiper_con'>这是个热点页面</view>

<button type='primary' bindtap='ReDian'>热点进入</button>

</swiper-item>

<swiper-item><view class='swiper_con'>这是个关注页面</view></swiper-item>

</swiper>

在对应的js文件,添加以下代码:

data: {

currentData: 0,

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

//获取当前滑块的index

bindchange: function (e) {

const that = this;

that.setData({

currentData: e.detail.current

})

},

//点击切换,滑块index赋值

checkCurrent: function (e) {

const that = this;

if (that.data.currentData === e.target.dataset.current) {

return false;

else {

that.setData({

currentData: e.target.dataset.current

})

}

}

在对应的wxss文件,添加以下代码:

.tab{float: left; width33.3333%;text-align: center;padding10rpx 0; }

.topTabSwiper{border-top1px solid #cccborder-bottom1px solid #ccczoom1;}

.topTabSwiper:after{content""clear: both;display: block;}

.tabBorer{border-bottom1px solid #f00color#f00;}

.swiper{width100%;}

.swiper_con{text-align: center; width100%height50%padding80rpx 0;}

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:怎么去掉小程序下拉菜单的页面

0