本文实例为大家分享了小程序实现选项卡效果的具体代码,供大家参考,具体内容如下
效果图:
github源码下载
& lt; !——index.wxml祝辞
& lt;视图类=皊wiper-tab”比;
& lt;视图bindtap=皊withNav”天气:为=" {{tabCont}} "天气:关键="项目。指数”class=" swiper-tab-list {{currentTab==item.index& # 63;“活跃”:“}}”数据流='{{项目。”指数}}在{{item.title}} & lt;/view>
& lt;/view>
& lt;偷窃者class=" swiper-box“当前=" {{currentTab}} "时间=" 300 " bindchange=癎etCurrentTab”数据流=' 6 '比;
& lt; swiper-item wx:=" {{tabCont}}”天气:关键=癷tem.index”比;
& lt;图像src=" https://www.yisu.com/zixun/{{item.pic}}’祝辞& lt;/image>
& lt; view> {{item.title}} & lt;/view>
& lt;/swiper-item>
& lt;/swiper>之前
CSS:
/* * index.wxss * *//* * index.wxss * */.swiper-tab {
行高:80 rpx;
边界:1 px固体# ccc;
显示:flex;
justify-content:空间;
对齐项目:中心;
}
.swiper-tab-list {
字体大小:30 rpx;
颜色:# 777;
text-align:中心;
}
.active {
颜色:# da7c0c;
边界底部:5 rpx固体# da7c0c;
}
.swiper-box {
显示:块;
高度:100%;
宽度:100%;
溢出:隐藏;
}
{.swiper-box视图
text-align:中心;
}
{形象
宽度:100%;
}
js:
页面({/* *
*页面的初始数据
*/数据:{
currentTab: 0,
tabCont:[{“标题”:“tab1”,“图片”:“. ./. ./img/1. jpg”、“指数”:“0”},{“标题”:“tab2”,“图片”:“. ./. ./img/2. jpg”、“指数”:“1”},{“标题”:“tab3”,“图片”:“. ./. ./img/3. jpg”、“指数”:“2”},{“标题”:“tab4”,“图片”:“. ./. ./img/2. jpg”、“指数”:“3”},{“标题”:“tab5”,“图片”:“. ./. ./img/2. jpg”、“指数”:“4”},{“标题”:“tab6”,“图片”:“. ./. ./img/2. jpg”、“指数”:“5”},{“标题”:“tab7”,“图片”:“. ./. ./img/2. jpg”、“指数”:“6”},{“标题”:“tab8”,“图片”:“. ./. ./img/2. jpg”、“指数”:“7”},{“标题”:“tab9”,“图片”:“. ./. ./img/2. jpg”、“指数”:“8”}),
}，/* *
* 生命周期函数--监听页面加载
*/onLoad:功能(选项){
}，/* *
*生命周期函数——监听页面初次渲染完成
*/onReady:函数(){
}，/* *
*生命周期函数——监听页面显示
*/昂秀:函数(){
}，/* *
*生命周期函数——监听页面隐藏
*/onHide:函数(){
}，/* *
*生命周期函数——监听页面卸载
*/onUnload:函数(){
}，/* *
*页面相关事件处理函数——监听用户下拉动作
*/onPullDownRefresh:函数(){
}，/* *
*页面上拉触底事件的处理函数
*/onReachBottom:函数(){
}，/* *
*用户点击右上角分享
*/onShareAppMessage:函数(){
}，//偷窃者滑动时触发bindchange事件,获取事件对象e获取当前所在滑块的指数,并将其更新至数据的currentTab中,视图渲染通过判断currentTab的让对应的标签盘旋。
GetCurrentTab:函数(e) {
console.log (e.detail.current);
var=这个;
this.setData ({
currentTab: e.detail.current
});//console.log (“11111”+ this.data.currentTab);
}，
swithNav:函数(e) {
var=这个;
that.setData ({
currentTab: e.target.dataset.current
});
}
})
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
