zoukankan      html  css  js  c++  java
  • 小程序 之navbar横向滚动

    一、效果图

     二、代码

    var app = getApp(),
      _this
    Page({
      data: {
        navData: [{
          id: 0,
          cat_name: '全部'
        }, ],
        currentTab: 0,
        navScrollLeft: 0,
        lists: []
      },
      init() {
        isEnd = false, page = 1
        _this.setData({
          lists: []
        })
      },
      onLoad(options) {
        wx.getSystemInfo({
          success: (res) => {
            this.setData({
              pixelRatio: res.pixelRatio,
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          },
        })
        _this = this;
        //获取所有的分类
        _this.getCategory()
      },
      getCategory() {
        app.util.request({
          showLoading: false,
          url: app.util.url('entry/wxapp/category'),
          success(res) {
            _this.setData({
              navData: _this.data.navData.concat(res.data.data)
            })
          },
        })
      },
      switchNav(event) {
        var cur = event.currentTarget.dataset.current;
        //每个tab选项宽度占1/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab选项居中                            
        this.setData({
          navScrollLeft: (cur - 2) * singleNavWidth
        })
        if (this.data.currentTab == cur) {
          return false;
        } else {
          this.setData({
            currentTab: cur
          })
        }
      }
    })
    <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.cat_name}}</view>
            </block>        
    </scroll-view>
    .nav {
      height: 100rpx;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      line-height: 100rpx;
      background: #f7f7f7;
      font-size: 16px;
      white-space: nowrap;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      background-color: #fff;
    }
    .nav-item {
      width: 20%;
      display: inline-block;
      text-align: center;
      color: #333;
      overflow: hidden;
    }
    .nav-item.active{
      color: #09bb07;
    }
  • 相关阅读:
    07-汤姆猫
    快捷键
    UIImageView属性
    UIImagePickerController
    UIDatePicker
    并发编程简介
    区别值类型数据和引用类型数据
    用条件属性而不是#if
    选择is或者as操作符而不是做强制类型转换
    始终使用属性(Property),而不是字段(Data Member)
  • 原文地址:https://www.cnblogs.com/yang-2018/p/13786714.html
Copyright © 2011-2022 走看看