<scroll-view scroll-x="true" style='width: 100%; white-space:nowrap;'> <view class="tab" style="margin-top: 10rpx;"> <view class="tab-nav" style='font-size:12px;'> <view wx:for="{{themeList}}" wx:key="index" bindtap="setTab" data-tabindex="{{index}}" style="min-width:33%;max-width:33%;text-align:center;height: 80rpx;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}"> <view wx:if="{{currentTab==index}}" style="color: #f00;font-size: 40rpx;"> {{themeList[index]}}</view> <view wx:if="{{currentTab!=index}}" style="color: #000;font-size: 30rpx;"> {{themeList[index]}}</view> </view> <view>
时间: 2023-08-05 20:07:31 浏览: 94
scroll-view演示
这是一段微信小程序的代码,使用了scroll-view和view组件来实现一个水平滚动的tab栏。其中使用了wx:for循环来遍历themeList数组中的元素,并使用index作为循环变量来动态生成tab。同时使用了bindtap来绑定setTab函数,将对应的index传递给setTab函数来实现tab的切换。
阅读全文