zoukankan      html  css  js  c++  java
  • 微信小程序滚动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{
       100vw;
      height: 310px;
    }
    
    /*滚动Tab*/
    ::-webkit-scrollbar {
       0;
      height: 0;
      color: transparent;
    }
    

      

    github地址如下:https://github.com/weiyunhelong/WxScrollTab,欢迎下载并使用!

  • 相关阅读:
    react路由组件&&非路由组件
    react函数式组件(非路由组件)实现路由跳转
    react使用antd组件递归实现左侧菜单导航树
    【LeetCode】65. Valid Number
    【LeetCode】66. Plus One (2 solutions)
    【LeetCode】68. Text Justification
    【LeetCode】69. Sqrt(x) (2 solutions)
    【LeetCode】72. Edit Distance
    【LeetCode】73. Set Matrix Zeroes (2 solutions)
    【LeetCode】76. Minimum Window Substring
  • 原文地址:https://www.cnblogs.com/tudaogaoyang/p/11692688.html
Copyright © 2011-2022 走看看