本文实例为大家分享了小程序实现选项卡和读卡器切换效果展示的具体代码,供大家参考,具体内容如下
先上效果图:
实现代码如下:
wxml页面
& lt;滚动视图scroll-x=" true "类=皐eui-navbar”比;
& lt;块wx:项="{{标签}}”在
& lt;视图id="{{指数}}”类=" {{activeIndex==指数& # 63;“item_on”:“}} default-item bindtap=皌abClick”比;
{{项}}
& lt;/view>
& lt;/block>
& lt;视图类=" weui-navbar-slider "祝辞& lt;/view>
& lt;/scroll-view>
& lt;视图类=熬匦巍?比;
& lt;偷窃者电流=" {{activeIndex}}”类=皊wiper-box”持续时间=" 100 " bindchange=癰indchange”比;
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab0
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab1
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab2
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab3
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab4
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab5
& lt;/swiper-item>
& lt; swiper-item类=皊wiper-item”比;
& lt;视图类=" slide-view "祝辞tab6
& lt;/swiper-item>
& lt;/swiper>
wxs样式:
页面{
高度:100%;
}
看来,滚动视图{
填充:0 px;
保证金:0 px;
}
.weui-navbar {
宽度:100%;
位置:固定;
边界底部:1 px固体# 00 bba1;
box-sizing: border-box;
空白:nowrap;}
z - index: 100;
背景:白色;
}
.rec {
宽度:100%;
高度:7%;
}
.weui-navbar .default-item {/*宽度:25%;*/显示:inline-block;
text-align:中心;
字体大小:32 rpx;
box-sizing: border-box;
高度:7%;
padding-bottom: 20 rpx;
}
.weui-navbar .item_on {
颜色:# 00 bba1;
}
.weui-navbar-slider {
位置:绝对的;
宽度:160 rpx;
高度:2 px;
内容:“”;
背景:# 00 bba1;
底部:0 px;
左:12.5 rpx;
过渡:变换。3;
}
.swiper-box {
身高:900 px;
边界底部:1 px固体# d1d1d1;
}
.swiper-box .swiper-item {
text-align:中心;
padding-top: 200 rpx;
高度:100%;
}
之前
js代码:
//index.js//获取应用实例
应用var=getApp ();
var mtabW;
页面({
数据:{
标签:["综合与绘画”、“艺术喷漆”、“泥塑”,“纸面绘画”,“布面绘画”,“中国油画”,“水墨画”),
activeIndex: 0,
slideOffset: 0,
tabW: 0
},//事件处理函数
onLoad:函数(){
var=这个;
wx.getSystemInfo ({
成功:函数(res) {
mtabW=res.windowWidth/4;//设置选项卡的宽度
that.setData ({
tabW: mtabW
})
}
}）;
},
bindViewTap:函数(){
wx.navigateTo ({
url:“. ./日志/日志”
})
},
tabClick:函数(e) {
var=这个;
var idIndex=e.currentTarget.id;
var offsetW=e.currentTarget.offsetLeft;//2种方法获取距离文档左边有多少距离
this.setData ({
activeIndex: idIndex,
slideOffset: offsetW
}）;
},
bindChange:函数(e) {
var电流=e.detail.current;
如果((当前+ 1)% 4==0){
}
var offsetW=当前* mtabW;//2种方法获取距离文档左边有多少距离
this.setData ({
activeIndex:目前,
slideOffset: offsetW
}）;
}
})
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
