微信小程序滾動tab的實現

微信小程序滾動tab的實現

1.目的：為了解決滾動版本的tab，以及實現虹吸效果。

2.方案：自己動手寫了一個Demo，用於測試實現如上的效果。其代碼有做參考，在這里先聲明。具體的參照如下:重慶大學二手書小程序。

3.效果：

              A)初始化效果:

               

                 B)最終效果:

 

               

 

 

 

 

 4.實現：

          項目結構如下:

                               

 

              WXML代碼如下：

                

<view class="Hv">間隔高度，測試虹吸效果1</view>
<view id="block0"></view>
<!--分類導航-->
<scrolltab tabdata="{{college}}" scrollTop="{{scrollTop}}" scrollH="{{scrollH}}" bindtabtap="tabtapopt"/>

<view class="Hv">間隔高度，測試虹吸效果A</view>
<view class="Hv">間隔高度，測試虹吸效果B</view>
<view class="Hv">間隔高度，測試虹吸效果C</view>
<view class="Hv">間隔高度，測試虹吸效果D</view>

　　 JS代碼如下：

//index.js
Page({
  data: {
    college: [{
      name: '分類A',
        id: -1
      },
      {
        name: '分類B',
        id: 0
      },
      {
        name: '分類C',
        id: 1
      },
      {
        name: '分類D',
        id: 2
      },
      {
        name: '分類E',
        id: 3
      },
      {
        name: '分類F',
        id: 4
      },
      {
        name: '分類G',
        id: 5
      },
      {
        name: '分類H',
        id: 6
      },
      {
        name: '分類I',
        id: 7
      },
      {
        name: '分類J',
        id: 8
      },
      {
        name: '分類K',
        id: 9
      },
      {
        name: '分類L',
        id: 10
      },
      {
        name: '分類M',
        id: 11
      },
      {
        name: '分類N',
        id: 12
      },
      {
        name: '分類O',
        id: 13
      },
      {
        name: '分類P',
        id: 14
      },
    ],
    scrollTop: 0,
    scrollH:0,
  },
  onLoad: function() {
    var that=this;
    const query = wx.createSelectorQuery()
    query.select('#block0').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      that.setData({
        scrollH: res[0].top,
      })
    })
  },
  //監測屏幕滾動
  onPageScroll: function(e) {
    this.setData({
      //scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio),
      scrollTop: parseInt(e.scrollTop)
    })
  },  
  //操作獲取數據
  tabtapopt(e) {
    var that = this;

    var colleges = that.data.college;
    var collegeCur = e.detail;


    if (collegeCur == -2) {
      wx.showToast({
        title: '全部',
      })
    } else {
      var names = "";
      colleges.forEach(function(value, index) {
        if (collegeCur == value.id) {
          names = value.name;
        }
      })

      wx.showToast({
        title: names,
      })
    }
  },
})

　　JSON文件如下:

{
  "usingComponents": {
    "scrolltab":"../../components/scrolltab/index"  
  }
}

　　WXSS文件如下:

/**index.wxss**/
.Hv{
  width: 100vw;
  height: 310px;
}

/*滾動Tab*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

　　

github地址如下：https://github.com/weiyunhelong/WxScrollTab，歡迎下載並使用！