微信小程序官方横向滚动tab

Bertha 。 2022-06-16 06:11 311阅读 0赞

先看效果：

![Center][]

Page(\{  
    data: \{  
        bodyList: \[  
          \{  
              id:1,  
              title:"美食"  
          \},  
           \{  
              id:2,  
              title:"鲜花"  
          \},  
           \{  
              id:3,  
              title:"果蔬"  
          \}, \{  
              id:4,  
              title:"蛋糕"  
          \}, \{  
              id:5,  
              title:"洗衣"  
          \}, \{  
              id:6,  
              title:"保洁"  
          \}, \{  
              id:7,  
              title:"看护"  
          \},\{  
              id:8,  
              title:"跑腿"  
          \},\{  
              id:9,  
              title:"维修"  
          \},\{  
              id:10,  
              title:"教育"  
          \},\{  
              id:11,  
              title:"出行"  
          \},\{  
              id:12,  
              title:"宠物"  
          \},\{  
              id:13,  
              title:"技能"  
          \},\{  
              id:14,  
              title:"住宿"  
          \}  
          ,\{  
              id:15,  
              title:"生鲜"  
          \}  
          ,\{  
              id:16,  
              title:"自驾"  
          \}  
          ,\{  
              id:17,  
              title:"旅行"  
          \}  
          ,\{  
              id:18,  
              title:"母婴"  
          \},\{  
              id:19,  
              title:"优惠"  
          \},  
          \{  
              id:20,  
              title:"其他"  
          \}  
        \],  
        activeIndex: 0,  
        sliderOffset: 0,  
        sliderLeft: 0,  
    \},  
    onLoad: function (param) \{  
        mythis = this;  
        wx.getSystemInfo(\{  
            success: function (res) \{  
              mythis.setData(\{  
                        windowHeight: res.windowHeight - 51, windowWidth: res.windowWidth, sliderLeft: 8, sliderOffset: res.windowWidth / mythis.data.bodyList.length \* mythis.data.activeIndex  
                    \});  
            \}  
        \})  
    \},  
      
    tabClick: function (e) \{  
        var id = e.currentTarget.id;  
        mythis.setData(\{  
            sliderOffset: e.currentTarget.offsetLeft,  
            activeIndex: id,  
        \});  
    \}  
\});

<scroll-view scroll-x="true" style="height:51px;">

<view class="weui-navbar" style="width:\{ \{bodyList.length\*50\}\}px;">  
      <block wx:for-items="\{ \{bodyList\}\}" wx:for-item="item" wx:key="\{ \{index\}\}">  
        <view id="\{ \{index\}\}" class="weui-navbar\_\_item \{ \{activeIndex == index ? 'weui-bar\_\_item\_on' : ''\}\}" bindtap="tabClick">  
          <view class="weui-navbar\_\_title">\{ \{item.title\}\}</view>  
        </view>  
      </block>  
      <view class="weui-navbar\_\_slider" style="width:\{ \{windowHeight/bodyList.length/windowHeight\*100\}\}%; transform: translateX(\{ \{sliderOffset\}\}px); -webkit-transform: translateX(\{ \{sliderOffset\}\}px);"></view>  
    </view>

</scroll-view>

代码上有任何问题的可以关注我们的公众号：前端人  ，找到我

![Center 1][]

[Center]: /images/20220616/e85d6d1593944a18b51f0ee8eb6cfcc0.png
[Center 1]: /images/20220616/930c525542684ca3b4960b82372defd1.png