作者：warzsy | 来源：互联网 | 2023-05-17 15:18
滑动组件：scroll-view
wxml代码
"true" class="tab-h" scroll-left="{{scrollLeft}}">
class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康
class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感
class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场
class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿
class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷
class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱
class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部
class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他
js代码
page({
data:{
currentTab:0
}
})
wxss代码
.tab-h{height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: relative;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
参考地址：https://blog.csdn.net/sophie_u/article/details/71745125
幻灯片组件：swiper
js代码：
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
})
wxml代码
参考手册：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
京公网安备 11010802041100号