小程序滚动导航

男娘i 2022-05-20 09:36 221阅读 0赞

备用的小程序样式，以后直接复制就好了，哈哈

index.wxml

<view class="container" bindtap="{ { qiphon.bb(44,22)}}"> <view class='nav'> <scroll-view scroll-x scroll-with-animation="{ { true}}" enable-back-to-top scroll-into-view="{ {'nav'+(activeNav>0?activeNav-1:activeNav)}}"> <block wx:for="{ { navData}}" wx:key="{ { index}}"> <view class='{ { activeNav===index?"active":""}}' id="{ {'nav'+index}}" data-key="{ { index}}" bindtap="changeNav"> { { item}} </view> </block> </scroll-view> </view> <view class='content' bindtouchstart='navTouchSt' bindtouchend='navTouchEnd'> <block wx:for="{ { showData}}" wx:key="{ { index}}"> { { item}} </block> </view> </view>

index.wxss

view, scroll-view, text { box-sizing: border-box; /* 属性最好这么设置，不要用page{}*/ }
    
    .nav { /* overflow: hidden; */ height: 50rpx; }
    
    .nav scroll-view { height: 50rpx; white-space: nowrap; }
    
    .nav view { display: inline-block; /*这里好像只能这样 */ width: 200rpx; height: 50rpx; border: 1rpx solid #ccc; text-align: center; }
    
    .nav .active { color: red; }
    
    .content { height: calc(100vh - 50rpx); background: #eee; }
    /* 滚动条 滚动条样式一定要去掉，不然太丑了 */
    ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/ width: 0; background-color:transparent; -webkit-border-radius: 0; }
    
    ::-webkit-scrollbar-track-piece { background-color: transparent; /*滚动条的背景颜色*/ -webkit-border-radius: 0; /*滚动条的圆角宽度*/ }
    
    ::-webkit-scrollbar { width: 0; /*滚动条的宽度*/ height: 0; /*滚动条的高度*/ }
    
    ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/ height: 0; background-color: transparent; -webkit-border-radius: 0; outline: 0; outline-offset: 0; border: 0; }
    
    ::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/ height: 0; background-color: 0; -webkit-border-radius: 0; }

index.js

//index.js
    let index = {  //我的建议是把这个对象单独用一个对象保存，这样操作更方便
      data: {
        navData:[  //导航栏数据
          'qiphon',
          'zoe',
          'sdfsdf',
          'sdf12',
          'sd457f',
          'sdef',
        ],
        showData:[],  // 显示的列表
        activeNav:0,
        touchX:null,
        touchTime:null
      },
      changeNav(e){   //鼠标点击时更换栏目
        this.setData({
          activeNav:e.currentTarget.dataset.key
        })
          var clientX = e.touches[0].clientX;
      },
      navTouchSt(e){
        this.setData({
          touchX:e.touches[0].clientX,
          touchTime:new Date().getTime()
        })
      },
      navTouchEnd(e){  //滑动时更换栏目
        let _this = this;
        let offsetNum = 60; //滑动偏移量
        let navLen = _this.data.navData.length;
        if(new Date().getTime() - this.data.touchTime < 1000){
          if(e.changedTouches[0].clientX - _this.data.touchX < offsetNum){
            _this.setData({
              activeNav:(_this.data.activeNav+1)>=navLen?_this.data.activeNav:this.data.activeNav+1
            })
            _this.loadNavMsg && _this.loadNavMsg(_this.data.activeNav)
          }else if(e.changedTouches[0].clientX - _this.data.touchX > offsetNum){
            _this.setData({
              activeNav:(_this.data.activeNav-1)<=0?0:this.data.activeNav - 1
            })
            _this.loadNavMsg && _this.loadNavMsg(_this.data.activeNav)
          }
        }
      },
      onLoad(){
        console.log(1)
        wx.request({
          url: 'https://qiphon.com/v3/index/index', //测试域名
          data:{},
          header: "{'Content-Type': 'application/json' }",
          complete(res){
            console.log(res)
          }
        })
      }
    };Page(index)