小程序实现 tab切换,点击tab 内容滚动切换

最新推荐文章于 2024-01-24 09:10:19 发布

白小码

最新推荐文章于 2024-01-24 09:10:19 发布

阅读量632

点赞数 1

分类专栏：微信小程序文章标签：小程序 webview elementui

本文链接：https://blog.csdn.net/m0_57364615/article/details/123334376

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

tab栏代码,点击那个高亮那个是通过 scroll-into-view 这个属性去实现的

<scroll-view class="tui-city-scroll container" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
    <text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}" wx:key="index">{{item}}</text>
</scroll-view>

    getStatus(e){
        this.setData({ status: e.currentTarget.dataset.index})
        wx.pageScrollTo() 点击不同的tab  要分别滚动到哪里
        // console.log( e.currentTarget.dataset.index)
      },

列表区域

<view class="container" >
    <van-collapse class="iconCss" value="{{ activeNames }}" >
        <van-collapse-item wx:for="{{50}}"  wx:key="index" title="有赞微商城 {{item}}" name="1">
        </van-collapse-item>
    </van-collapse>