精华内容
下载资源
问答
  • 根据左侧列表,联动跳右侧内容。 效果如图: wxml代码: <view class="page"> <!-- 左侧导航 --> <view class='tui-fixed-left'> <scroll-view class='tui-city-scroll' scroll-x...

    根据左侧列表,联动跳右侧内容。

    效果如图:

    wxml代码:

    <view class="page">
      <!-- 左侧导航 -->
      <view class='tui-fixed-left'>
        <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{leftMenuTop}}">
        <text class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}" wx:for="{{navList}}" wx:key="unique" data-index="{{index}}" id='{{index}}' catchtap='changeMenu'>{{item.c_name}}</text>
        </scroll-view>
      </view>
    
      <!-- 右侧滚动商品 -->
      <view class='content'>
        <scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{rightProTop}}" bindscroll="scroll">
          <view class='pro-item' wx:for="{{navList}}" wx:key="unique">
            <view class='tui-list-head' id='NAV{{index}}'>{{item.c_name}}</view>
            <view class='tui-list-li'>
              <view class='goods-box' wx:for-item='items' wx:for="{{item.list}}" wx:key="unique" >
                <image class='goodsImg' src='{{items.url}}'></image>
                <view class='goodsName'>{{items.goodsName}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    
    </view>

    wxss:

    .tui-fixed-x{position: fixed;top: 0rpx;left: 0;}
    .tui-fixed-left{width: 180rpx;height: 100%;border-right: 1px solid #dfdfdf;
    position: fixed;background-color:#f5f5f5;top: 0rpx;left: 0;}
    .tui-list-head{height:65rpx;line-height: 65rpx;}
    .tui-city-scroll{width: 100%;}
    .menu-item{display: block;position: relative;width: 180rpx;height: 100rpx;line-height: 100rpx;font-size: 26rpx;
    border-bottom: 1px solid #dfdfdf;box-sizing: border-box;background:#fff;z-index: 10;text-align: center;}
    .menu-active{border-left:10rpx solid #5196ff;background-color:#f0f0f0;}
    .content{padding:0 20rpx;position: fixed;top: 89rpx;right: 0;width:570rpx;height: 100%;box-sizing: border-box;}
    .tui-city-scroll-y{height: 100%;box-sizing: border-box;}
    .tui-list-head{height: 65rpx;line-height: 65rpx;font-size: 28rpx;font-weight: 700;}
    .tui-list-li{padding:20rpx 0 0 0;background:#fff;overflow: hidden;color: #fff;font-size: 50rpx;box-sizing: border-box;}
    .goods-box{margin-right:10rpx;float:left;width:170rpx;overflow: hidden;}
    .tui-list-li .goods-box:nth-child(3n){margin-right:0rpx;}
    .goodsImg{margin-bottom: 15rpx;display: block;width:100rpx;height: 100rpx;margin:0 auto;}
    .goodsName{margin-bottom: 20rpx;width:100%;height: 42rpx;line-height: 42rpx;overflow: hidden;box-sizing: border-box;
    text-align: center;font-size: 24rpx;text-overflow: ellipsis;white-space: nowrap;color: #333;}

    js:

    //声明全局变量
    let proListToTop = [], menuToTop = [], MENU = 0, 
    windowHeight, timeoutId;
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        staticImg: app.globalData.staticImg,
        currentActiveIndex: 0,
        // 接口返回的商品数组
        navList: [
          {
            c_id: "01",
            c_name: '电脑办公',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "02",
            c_name: '祛痘',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "02",
            c_name: '化妆品',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "03",
            c_name: '口红',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "04",
            c_name: '包包',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "05",
            c_name: '面膜',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "06",
            c_name: '精华乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "07",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "08",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "09",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "10",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "11",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "12",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "13",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "14",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "07",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          },
          {
            c_id: "07",
            c_name: '洁面乳',
            list: [
              {
                id: 1,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 2,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 3,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 4,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
              {
                id: 5,
                url: 'https://resource.yirenheju.cn/wechat/index/err.png',
                goodsName: '玩具',
              },
            ]
          }
        ]    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 确保页面数据已经刷新完毕~
        setTimeout(() => {
          this.getAllRects()
        }, 20)
      },
    
      changeMenu(e) {
        console.log(proListToTop);
        // 改变左侧tab栏操作
        if (Number(e.target.id) === this.data.currentActiveIndex) return
        MENU = 1
        this.setData({
          currentActiveIndex: Number(e.target.id),
          rightProTop: proListToTop[Number(e.target.id)]
        })
        this.setMenuAnimation(Number(e.target.id))
      },
      scroll(e) {
        console.log(e);
        for (let i = 0; i < proListToTop.length; i++) {
          if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
            return this.setDis(i)
          }
        }
        // 找不到匹配项,默认显示第一个数据
        if (!MENU) {
          this.setData({
            currentActiveIndex: 0
          })
        }
        MENU = 0
      },
      setDis(i) {
        // 设置左侧menu栏的选中状态
        if (i !== this.data.currentActiveIndex + 1 && !MENU) {
          this.setData({
            currentActiveIndex: i - 1
          })
        }
        MENU = 0
        this.setMenuAnimation(i)
      },
      setMenuAnimation(i) {
        // 设置动画,使menu滚动到指定位置。
        let self = this
        console.log(33)
        if (menuToTop[i].animate) {
          console.log(11111)
          // 节流操作
          if (timeoutId) {
            clearTimeout(timeoutId)
          }
          timeoutId = setTimeout(() => {
            console.log(12138)
            self.setData({
              leftMenuTop: (menuToTop[i].top - windowHeight)
            })
          }, 50)
        } else {
          console.log(11)
          if (this.data.leftMenuTop === 0) return
          console.log(22)
          this.setData({
            leftMenuTop: 0
          })
        }
      },
      getActiveReacts() {
        wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {
          return rects[0].top
        }).exec()
      },
      getAllRects() {
    
        // 获取商品数组的位置信息
        wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {
          rects.forEach(function (rect) {
            console.log(rect)
            // 这里减去44是根据你的滚动区域距离头部的高度,如果没有高度,可以将其删去
            proListToTop.push(rect.top - 44)
          })
        }).exec()
    
        // 获取menu数组的位置信息
        wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {
          wx.getSystemInfo({
            success: function (res) {
              console.log(res);
              windowHeight = res.windowHeight / 2
              // console.log(windowHeight)
              rects.forEach(function (rect) {
                menuToTop.push({
                  top: rect.top,
                  animate: rect.top > windowHeight
                })
              })
            }
          })
        }).exec()
      },
      // 获取系统的高度信息
      getSystemInfo() {
        let self = this
        wx.getSystemInfo({
          success: function (res) {
            windowHeight = res.windowHeight / 2
          }
        })
      },
    
    
    })

     

    转载于:https://www.cnblogs.com/joe235/p/11453438.html

    展开全文
  • <!-- 搜索 --> <view class="search"> <input class="search-box" placeholder='痘研商城' bindtap='goodsName'><...image src="{{staticImg}}index/iconSearch.png" cl...

    
    
    <!-- 搜索 -->
    <view class="search">
    <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input>
    <image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image>
    </view>
    <!-- 左侧导航 -->
    <view class='tui-fixed-left'>
    <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{leftMenuTop}}">
    <text class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}" wx:for="{{navList}}" wx:key="unique" data-index="{{index}}" id='{{index}}' catchtap='changeMenu'>{{item.c_name}}</text>
    </scroll-view>
    </view>
    <!-- 右侧滚动商品 -->
    <view class='content'>
    <scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{rightProTop}}" bindscroll="scroll">
    <view class='pro-item' wx:for="{{navList}}" wx:key="unique">
    <view class='tui-list-head' id='NAV{{index}}'>{{item.c_name}}</view>
    <view class='tui-list-li'>
    <view class='goods-box' wx:for-item='items' wx:for="{{item.list}}" wx:key="unique" >
    <image class='goodsImg' src='{{items.url}}'></image>
    <view class='goodsName'>{{items.goodsName}}</view>
    </view>
    </view>
    </view>
    </scroll-view>
    </view>
     

    .wxss

    
    
    page{
    font-family: "微软雅黑";
    background-color:#f0f0f0;
    }
    .search{
    width:100%;
    height:88rpx;
    background-color:#5196ff;
    box-sizing: border-box;
    padding-top:18rpx;
    position: fixed;
    left: 0;
    top: 0;
    }
    .search-box{
    width:690rpx;
    height:57rpx;
    margin-left:30rpx;
    background-color:#fff;
    box-sizing: border-box;
    padding-left: 60rpx;
    border-radius: 57rpx;
    font-size: 26rpx;
    }
    .question-mark{
    width:30rpx;
    height:30rpx;
    position: absolute;
    left:45rpx;
    top:30rpx;
    }
    .tui-fixed-x{
    /* margin-left: 130px; */
    position: fixed;
    top: 89rpx;
    left: 0;
    }
    .tui-fixed-left{
    width: 180rpx;
    height: 100%;
    border-right: 1px solid #dfdfdf;
    position: fixed;
    background-color:#f5f5f5;
    top: 89rpx;
    left: 0;
    }
    .tui-list-head{
    height:65rpx;
    line-height: 65rpx;
    }
    .tui-city-scroll{
    width: 100%;
    }
    .menu-item{
    font-size: 26rpx;
    box-sizing: border-box;
    height: 100rpx;
    line-height: 100rpx;
    width: 180rpx;
    background-color:#fff;
    display: block;
    border-bottom: 1px solid #dfdfdf;
    position: relative;
    z-index: 10;
    text-align: center;
    }
    .menu-active{
    border-left:10rpx solid #5196ff;
    background-color:#f0f0f0;
    }
    .content{
    width:570rpx;
    box-sizing: border-box;
    padding-left: 20rpx;
    padding-right: 20rpx;
    height: 100%;
    position: fixed;
    top: 89rpx;
    right: 0;
    }
    .tui-city-scroll-y{
    height: 100%;
    box-sizing: border-box;
    }
    .tui-list-head{
    height: 65rpx;
    line-height: 65rpx;
    font-size: 28rpx;
    font-weight: 700;
    }
    .tui-list-li{
    background-color:#fff;
    /* height: 400px; */
    overflow: hidden;
    color: #fff;
    font-size: 50rpx;
    box-sizing: border-box;
    padding:20rpx 0 0 0;
    }
    .goods-box{
    width:170rpx;
    /* height: 100rpx;
    background: #c00; */
    overflow: hidden;
    margin-right:10rpx;
    /* margin-bottom: 10rpx; */
    float:left;
    }
    .tui-list-li .goods-box:nth-child(3n){
    margin-right:0rpx;
    }
    .goodsImg{
    display: block;
    width:100rpx;
    height: 100rpx;
    margin:0 auto;
    margin-bottom: 15rpx;
    }
    .goodsName{
    width:100%;
    overflow: hidden;
    box-sizing: border-box;
    height: 42rpx;
    line-height: 42rpx;
    text-align: center;
    font-size: 24rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    margin-bottom: 20rpx;
    }


    
    

     

    .js

    
    
    var app = getApp();
    //声明全局变量
    let proListToTop = [], menuToTop = [], MENU = 0, windowHeight, timeoutId;
    // MENU ==> 是否为点击左侧进行滚动的,如果是,则不需要再次设置左侧的激活状态
    Page({

    data: {
    staticImg: app.globalData.staticImg,
    currentActiveIndex: 0,
    // 接口返回的商品数组
    navList:[
    {
    c_id: "01",
    c_name:'电脑办公',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "02",
    c_name: '祛痘',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "02",
    c_name: '化妆品',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "03",
    c_name: '口红',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "04",
    c_name: '包包',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "05",
    c_name: '面膜',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "06",
    c_name: '精华乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "07",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "08",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "09",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "10",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "11",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "12",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "13",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "14",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "07",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    {
    c_id: "07",
    c_name: '洁面乳',
    list: [
    {
    id: 1,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 2,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 3,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 4,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    {
    id: 5,
    url: 'https://resource.yirenheju.cn/wechat/index/err.png',
    goodsName: '玩具',
    },
    ]
    },
    ],


    },
    onLoad: function (e) {


    // 确保页面数据已经刷新完毕~
    setTimeout(() => {
    this.getAllRects()
    }, 20)

    },
     
    changeMenu(e) {
    console.log(proListToTop);
    // 改变左侧tab栏操作
    if (Number(e.target.id) === this.data.currentActiveIndex) return
    MENU = 1
    this.setData({
    currentActiveIndex: Number(e.target.id),
    rightProTop: proListToTop[Number(e.target.id)]
    })
    this.setMenuAnimation(Number(e.target.id))
    },
    scroll(e) {
    console.log(e);
    for (let i = 0; i < proListToTop.length; i++) {
    if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
    return this.setDis(i)
    }
    }
    // 找不到匹配项,默认显示第一个数据
    if (!MENU) {
    this.setData({
    currentActiveIndex: 0
    })
    }
    MENU = 0
    },
    setDis(i) {
    // 设置左侧menu栏的选中状态
    if (i !== this.data.currentActiveIndex + 1 && !MENU) {
    this.setData({
    currentActiveIndex: i - 1
    })
    }
    MENU = 0
    this.setMenuAnimation(i)
    },
    setMenuAnimation(i) {
    // 设置动画,使menu滚动到指定位置。
    let self = this
    console.log(33)
    if (menuToTop[i].animate) {
    console.log(11111)
    // 节流操作
    if (timeoutId) {
    clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(() => {
    console.log(12138)
    self.setData({
    leftMenuTop: (menuToTop[i].top - windowHeight )
    })
    }, 50)
    } else {
    console.log(11)
    if (this.data.leftMenuTop === 0) return
    console.log(22)
    this.setData({
    leftMenuTop: 0
    })
    }
    },
    getActiveReacts() {
    wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {
    return rects[0].top
    }).exec()
    },
    getAllRects() {

    // 获取商品数组的位置信息
    wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {
    rects.forEach(function (rect) {
    console.log(rect)
    // 这里减去44是根据你的滚动区域距离头部的高度,如果没有高度,可以将其删去
    proListToTop.push(rect.top - 44)
    })
    }).exec()

    // 获取menu数组的位置信息
    wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {
    wx.getSystemInfo({
    success: function (res) {
    console.log(res);
    windowHeight = res.windowHeight / 2
    // console.log(windowHeight)
    rects.forEach(function (rect) {
    menuToTop.push({
    top: rect.top,
    animate: rect.top > windowHeight
    })
    })
    }
    })
    }).exec()
    },
    // 获取系统的高度信息
    getSystemInfo() {
    let self = this
    wx.getSystemInfo({
    success: function (res) {
    windowHeight = res.windowHeight / 2
    }
    })
    }
     
    })
    
    

     

    转载于:https://www.cnblogs.com/xinheng/p/9544398.html

    展开全文
  • 主要为大家详细介绍了微信小程序实现菜单左右联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信联动菜单 部门 岗位关系 选择器 简单易懂的dome 代码量非常少 可以直接使用
  • 联动菜单是大家在开发小程序经常会遇到的一个功能,下面这篇文章主要给大家介绍了关于微信小程序实现左右联动的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
  • 主要为大家详细介绍了微信小程序实现左右列表联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 仿美团菜单 swiper分类菜单
  • 本文实例为大家分享了微信小程序实现美团菜单的具体代码,供大家参考,具体内容如下 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第一行菜品所在分类对应...
  •   今天给大家分享一下如何实现微信小程序左右菜单联动效果,具体过程如下: 效果图: 一、wxml文件   这里需要注意的一点是:右边列表循环的那一项必须要加上 id="scroll-{{index}}" ,少了这个是无法实现...

      今天给大家分享一下如何实现微信小程序左右菜单栏联动效果(相关代码模块我已单独整理放到github上面了,欢迎前来start),具体过程如下:

    效果图:

    在这里插入图片描述

    github地址:https://github.com/sunshime/weChatSkill

    一、wxml文件

      这里需要注意的一点是:右边列表循环的那一项必须要加上 id="scroll-{{index}}" ,少了这个是无法实现左边联动右边的效果的,这个坑我踩了很多次,所以在这里重点强调一下。

    <!-- 实现左右联动效果 -->
    <view class="link">
    	<!-- 左边 -->
    	<scroll-view class="left" scroll-y scroll-with-animation scroll-top="{{scrollTops}}">
    		<view class="item {{tabCur===index?'active':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">{{item.name}}</view>
    	</scroll-view>
    
    	<!-- 右边 -->
    	<scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink">
    		<!-- 重点: id="scroll-{{index}}"  这个必须要有 不然实现不了左边联动右边的效果-->
    		<view wx:for="{{list}}" wx:key="{{index}}" class="right-cont" id="scroll-{{index}}">
    			<view class="title">{{item.name}}</view>
    			<view class="content">
    				<view class="list-item" wx:for="{{item.list}}" wx:key="{{indexs}}" wx:for-index="indexs" wx:for-item="items">{{items}}</view>
    			</view>
    		</view>
    	</scroll-view>
    </view>
    

    二、wxss文件

    .link {
      width: 100%;
      height: 100%;
      display: flex;
    }
    
    .left {
      width: 220rpx;
      /* 这里的高度可以写也可以不写,效果还是可以实现的,不过最好还是写上吧 */
      height: 100vh;
      background-color: rgb(229, 243, 243);
      text-align: center;
      color: #333;
    }
    
    .left .item {
      line-height: 50px;
      font-size: 34rpx;
    }
    
    .active {
      background-color: tomato;
      color: #fff;
    }
    
    .right {
      /* 这里的高度可写也可不写,效果还是可以实现的,不过最好还是写上吧 */
      height: 100vh;
      background-color: #f8f8f8;
      padding: 0 30rpx;
    }
    
    .right-cont {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #ccc;
    }
    
    .title {
      text-align: center;
      font-size: 36rpx;
      color: #333;
      padding-top: 60rpx;
      padding-bottom: 20rpx;
    }
    
    .content {
      padding: 0 5rpx 0 20rpx;
    }
    
    .list-item{
      font-size: 32rpx;
      color: #333;
      line-height: 50rpx;
    }
    

    三、js文件

    import category from '../../api/category'
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        list: category,
        scrollTops: 0,  // 要滚动的高度
        tabCur: 0,  // 当前项
        rightCur: 0,  // 用于实现左边联动右边
      },
      // 切换左边菜单并联动右边
      tabNav(e) {
        let index = e.currentTarget.dataset.index;
        this.setData({
          tabCur: index,
          rightCur: index,
          // 实现左边自动滑动到某个位置 4表示自动滑动到 第五项 (4为索引值)
          scrollTops: (index - 4) * 50
        })
      },
      /**
       * 滑动右边对应左边菜单切换
       * 1、拿到该元素的高度,设定它的top和bottom
       * 2、判断滑动的距离是否大于 设定的top并小于设定的bottom,然后对应左边菜单的滑动
       */
      scrollLink(e) {
        let list = this.data.list
        let itemHeight = 0;
        for (let i = 0; i < list.length; i++) {
          //拿到每个元素
          let els = wx.createSelectorQuery().select("#scroll-" + i);
          els.fields({
            size: true
          }, function (res) {
            list[i].top = itemHeight;
            itemHeight += res.height;
            list[i].bottom = itemHeight
          }).exec()
        }
    
        this.setData({
          list
        })
    
        // 拿到滚动的高度
        let scrollTop = e.detail.scrollTop;
        for (let i = 0; i < list.length; i++) {
          if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
            this.setData({
              tabCur: i,
              scrollTops: (i - 4) * 50
            })
            return false
          }
        }
      }
    })
    
    引入的category文件(我这边是分开写的,所以这里单独列出来)
    const category = [{
        name: '梨花雪',
        list: [
          '时光年轮一圈圈转着。',
          '现在,他站在原地,回首望去,从前点点滴滴,琐琐碎碎。',
          '猛然发现,自己已走过了这么多。',
          '他想,如果再次遇到下雪天,他会毫不犹豫迎上去,',
          '因为那里,有旧时光味道。他仍在怀念,仍在留恋。怀念,白雪纷扬日子。'
        ]
      }, {
        name: '冰雪消融',
        list: [
          '友情是每个人都应有的东西,而且相当的珍贵,',
          '在朋友之间,难免会产生分歧,让友情结冰,',
          '但我现在知道,友情上消融的冰雪是暖的。'
        ]
      },
      {
        name: '境由心造',
        list: [
          '有人安于某种生活,有人不能。',
          '因此能安于自已目前处境的不妨就如此生活下去,不能的只好努力另找出路。',
          '你无法断言哪里才是成功的,也无法肯定当自已到达了某一点之后,会不会快乐。',
          '有些人永远不会感到满足,他的快乐只建立在不断地追求与争取的过程之中,',
          '因此,他的目标不断地向远处推移。这种人的快乐可能少,但成就可能大。'
        ]
      },
      {
        name: '处世之道',
        list: [
          '有一群豪猪,就是野猪啊,身上长刺的那种野猪,',
          '大家挤在一起过冬,它们老有一个困惑,',
          '就是不知道大家在一起以什么样的距离最好,',
          '离得稍微远一点,冬天就冷,互相借不着热气,大家就往一起凑凑。',
          '结果一旦凑近了,彼此的刺都扎着对方了。',
          '就又开始远离。',
          '但是再远的话大家又觉得寒冷,',
          '又想借助别人的温暖,就再凑,凑着凑着又受伤了,',
          '然后再拉远,多少次磨合以后豪猪们终于找到了一种最最恰如其分的距离,',
          '那就是在彼此不伤害的前提下,保持着群体的温暖'
        ],
      },
      {
        name: '夏天',
        list: [
          '夏天的夜色很美,清爽的晚风哼着小曲来到了我们身边,',
          '给我们送来了一丝丝凉意。',
          '夜空中,星星眨着眼睛,静静地听着月亮姐姐讲故事。',
          '这动听的故事,激发了星星们的想象,',
          '星星们都在窃窃私语地讨论着,难道是在讨论演讲稿,到哪里发表演讲吗?',
          '周围一片宁静,只有晚风在低低地吟唱,',
          '月光洒向永不停息的小河,洒向盛开在夜晚的流星花,仿佛一切都活了。',
          '萤火虫提着小灯笼,殷勤地照看着花儿、草儿,让他们快快长大、开花。'
        ]
      }, {
        name: '风筝',
        list: [
          '一只跌落在脚边的风筝把我拉回到现实。',
          '是啊!无论风筝飞的多高、多远,但都离不开手中的丝线,',
          '最后还是要回到地面。人不也一样吗?',
          '长大了,成家了,但无论离开故乡多远,离开亲人多远,你的心还在故乡,还在父母亲人的身边啊!'
        ]
      }, {
        name: '春雨',
        list: ['我赤脚站到院中,踩在青石板上,',
          '任雨水在我脸上流淌,我不禁抬起头望着那天空,',
          '努力的想要看清春雨的样子,却怎么也看不清,',
          '只听得见耳边的声音,那么清晰那么让人心情舒畅。',
          '这温柔的春雨,带来他最动听的声音,击打着石台,',
          '发出清脆的响声,声音透过雨帘,透进了我的心。'
        ]
      }, {
        name: '拥有',
        list: [
          '拥有诚实,就舍弃了虚伪;',
          '拥有充实,就舍弃了无聊;拥有踏实,就舍弃了浮躁。',
          '不论是有意的丢弃,还是意外的失去,只要曾经真实的拥有,在一些时候,大度的舍弃不也是一种境界吗?',
          '在不经意所失去的, 你还可以重新去争取。 ',
          '丢掉了爱心, 你可以在春天里寻觅, 丢掉了意志, 你要在冬天重新磨砺。 ',
          '但是丢掉了懒惰, 你却不能把它拾起。 ',
          '欲望太多, 反成了累赘, 还有什么比拥有淡泊的心胸, 更能让自己充实、 满足呢? '
        ]
      }, {
        name: "信任",
        list: [
          '信任一个人有时需要许多年的时间。',
          '因此,有些人甚至终其一生也没有真正信任过任何一个人,',
          '倘若你只信任那些能够讨你欢心的人,那是毫无意义的;',
          '倘若你信任你所见到的每一个人,那你就是一个傻瓜;',
          '倘若你毫不犹疑、匆匆忙忙地去信任一个人,那你就可能也会那么快地被你所信任的那个人背弃;',
          '倘若你只是出于某种肤浅的需要去信任一个人,那么旋踵而来的可能就是恼人的猜忌和背叛;',
          '但倘若你迟迟不敢去信任一个值得你信任的人,那永远不能获得爱的甘甜和人间的温暖,你的一生也将会因此而黯淡无光。'
        ]
      }, {
        name: '生命',
        list: [
          '应当承认,生命就是希望。',
          '应当说,卑鄙和庸俗不该得意过早,不该误认为它们已经成功地消灭了高尚和真纯。',
          '伪装也同样不能持久,因为时间像一条长河在滔滔冲刷,',
          '卑鄙者、奸商和俗棍不可能永远戴着教育家、诗人和战士的桂冠。',
          '在他们畅行无阻的生涯尽头,他们的后人将长久地感到羞辱。'
        ]
      }, {
        name: '闲情',
        list: [
          '终日休息着,睡和醒的时间界限,便分得不清。',
          '有时在中夜,觉得精神很圆满。',
          '——听得疾雷杂以疏雨,每次电光穿入,',
          '将窗台上的金钟花,轻淡清澈的映在窗帘上,又急速的隐抹了去。',
          '而余影极分明的,印在我的脑膜上。我看见“自然”的淡墨画,这是第一次。'
        ]
      }, {
        name: '背影',
        list: [
          '我与父亲不相见已二年余了,我最不能忘记的是他的背影。',
          '那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,',
          '我从北京到徐州,打算跟着父亲奔丧回家。',
          '到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。',
          '父亲说,“事已如此,不必难过,好在天无绝人之路!”'
        ]
      }, {
        name: '乡愁',
        list: [
          '经过多年的风雨磨砺,我们突然意识到:',
          '那些曾在生命中抚慰过我们的精神驿站,',
          '那些曾温暖和光明过我们的贫寒童年的火光,',
          '却在不经意间,渐渐地离我们远了,',
          '模糊了——譬如母亲、譬如童年的老屋、隔壁家羊角辫摇摇摆摆的阿娇一种难以驱遣的巨大空虚和孤寂袭来,',
          '泪水顿时涌上来。这时,我们患了一种蔓延了几个世纪的病——乡愁'
        ]
      }, {
        name: '天池',
        list: [
          '从第一眼瞥见天池到和她告别,我一直沉默不语。',
          '我不愿用一点声音,来弹破这宁静。',
          '天池一日我的心情是宁静的,这是我最珍爱的心境。',
          '山光湖色随着日影的移动而变幻。',
          '午餐后,睡了一会儿,一阵冷气袭来,就像全身浴在冰山雪水之中。',
          '我悄悄起来,不愿惊醒别人,独自走到廊上,',
          '再次仔细观察天池:雪峰与杉林,白与黑相映,格外分明,',
          '雪山后涌起的白云给强烈阳光照得白银一样刺眼。'
        ]
      }, {
        name: '秋天',
        list: [
          '秋姑娘又来到了果园里。',
          '果园里的果子成熟了,葡萄架上挂满了一串串紫里透红的大葡萄,',
          '它们相互掩映着自己的身体,太阳出来了,',
          '照射在葡萄上就像一颗颗透明的紫色宝石。',
          '桔树上,一个个金黄色的桔子,让人看了忍不住想咬一口。',
          '假如你剥开桔皮,你就可以看见一瓣瓣桔子就像一弯弯亏月时的月亮,晶莹剔透。'
        ]
      }, {
        name: '早晨',
        list: [
          '清晨的江边,没有车水马龙的喧嚣,',
          '没有人声鼎沸的吵杂,也没有让人深感压抑的匆匆人群。',
          '清晨的江边,有的只是垂柳的迎风飘拂,',
          '有的只是枝头小鸟的婉转歌唱,',
          '有的只是江风中蕴含着的淡淡的腥味。',
          '清晨的江边,很静,',
          '静的可以抚平内心的烦躁,',
          '清晨的江边,很美,绿树红花、微风拂面,不允许你携带任何忧伤。'
        ]
      }, {
        name: '夏天',
        list: [
          '夏天是万物生机勃勃的季节,百花争奇斗艳,',
          '那么你知道都有哪些花是夏季开放的吗?跟随美文網小编一起来看看吧。',
          ' 描写夏天植物的美文摘抄:荷花吟 微风拂过平静的湖面,给湖面留下片片',
    
        ]
      }, {
        name: '栾树',
        list: [
          '栾树 十二月初,深圳,我在校园的青石板小路上捡到了栾树的蒴果。',
          ' 栾树蒴果看上去有种似曾相识的漂亮--三瓣又薄又脆的果皮围拢成三棱形,',
          '前端小心翼翼地开着口'
        ]
      }, {
        name: '荷塘',
        list: [
          '又是一年荷塘色 初夏早上六点,',
          '清亮透明的月儿还躲藏在云朵里,不忍离去,',
          '校园内行人稀少,我骑着单车,晃晃悠悠的耷拉着星松的睡眼。',
          '校园内景色如常,照样是绿'
        ]
      }
    ]
    
    export default category;
    

      以上就是实现的代码,相应的各个步骤解释我直接在代码中注释了,大家可以多看几次代码的实现过程,然后做出自己需要的效果。

    展开全文
  • 小程序无法获取元素的宽高,位置信息,只能通过后台计算,但是存在较大的机器误差,不知有啥好的解决方案?
    1、微信小程序菜单内容左右联动
    

    小程序无法获取元素的宽高,位置信息,只能通过后台计算,但是存在较大的机器误差,不知有啥好的解决方案?

    如图所以,左侧是菜单栏,右侧是主体内容,点击左侧菜单,右侧滑动到相应的位置;右侧滑动过程,也会改变左侧菜单的选中状态。本人的实现方案:

    • 所有元素大小单位用rpx;

    • 通过scrollbind(e) 的 e.detail.scrollHeight获取右侧滑动区域的总高度(单位px)

    • 通过物品高度和标题高度的比值,计算出各自的实际高度(单位px)

    • 通过修改scrollTop(单位px)改变主体内容位置

    这样还是存在1px-100px的误差,物品越多,后面的累计误差会越大,有没有更好的解决办法呢?

    答:测试了一下,的确用scroll-view的scroll-to-view特性可以解决:

    wxml中修改:

    <scroll-view scroll-y style="height: 31.5em" class="goods" bindscroll="goodsScrollAct"  scroll-into-view="{{toView}}" >
      <view class="box" id="{{item.viewId}}"  wx:for="{{allGoods}}" wx:key="unique" wx:for-index="typeId">

    js文件中修改:
    page data中增加:

    menuType:['food','dust','bowl','cages','toys','tools'],
    toView:'cages',

    然后把下面函数修改一下:
    selectMenuAct: function (e) {

    //typename
    var id = e.target.dataset.id;
    var tType=this.data.menuType[id];
    console.log(e),
    this.setData({
      scrollNum: id,
      toView: tType
      //scrollTop: this.data.heightList[id]
    });

    },
    测试环境下通过。

    scroll-into-view值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素。

    2、微信小程序MD5加密

    一般很多语言都有MD5加密的库。

    如果你指的是数据加密,怕数据明文不安全,我建议使用base64 + 一些前缀或者后缀进行加密,然后将数据传到服务器,服务器再进行解密后去掉这些前后缀。比如,明文是abc,你可以加一下前缀,变成123abc,然后加密成为MTIzYWJj再发出去,然后再解密就行了。

    一般MD5加密是不可逆的。而base64可以编码解码,如下:

    package main
    
    import (
        "fmt"
        "github.com/hunterhug/GoSpider/util"
    )
    
    func main() {
        s := "abc"
        prefix := "123"
        base64e := util.Base64E(prefix + s)
        fmt.Println("加密:" + base64e)
        fmt.Println("再解密:" + util.Base64D(base64e))
    }
    

    结果

    加密:MTIzYWJj
    再解密:123abc

    百度百科介绍:Base64编码可用于在HTTP环境下传递较长的标识信息。例如,在Java Persistence系统Hibernate中,就采用了Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串,用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时,采用Base64编码不仅比较简短,同时也具有不可读性,即所编码的数据不会被人用肉眼所直接看到。

    我的Golang语言自己封装的加密库一般是这样的:

    /*
    Copyright 2017 by GoSpider author.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
        http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    */
    
    package util
    
    import (
        "crypto/hmac"
        "crypto/md5"
        "crypto/sha256"
        "encoding/base64"
        "encoding/hex"
        "fmt"
        "net/url"
        "strings"
    )
    
    // HMAC with the SHA256  http://blog.csdn.net/js_sky/article/details/49024959
    func ComputeHmac256(message string, secret string) string {
        key := []byte(secret)
        h := hmac.New(sha256.New, key)
        h.Write([]byte(message))
        return base64.StdEncoding.EncodeToString(h.Sum(nil))
    }
    
    // create md5 string
    func Strtomd5(s string) string {
        h := md5.New()
        h.Write([]byte(s))
        rs := hex.EncodeToString(h.Sum(nil))
        return rs
    }
    
    func Md5(str string) string {
        return Strtomd5(str)
    }
    
    // 字符串base64加密
    func Base64E(urlstring string) string {
        str := []byte(urlstring)
        data := base64.StdEncoding.EncodeToString(str)
        return data
    }
    
    // 字符串base64解密
    func Base64D(urlxxstring string) string {
        data, err := base64.StdEncoding.DecodeString(urlxxstring)
        if err != nil {
            return ""
        }
        s := fmt.Sprintf("%q", data)
        s = strings.Replace(s, "\"", "", -1)
        return s
    }
    
    //url转义
    func UrlE(s string) string {
        return url.QueryEscape(s)
    }
    
    //url解义
    func UrlD(s string) string {
        s, e := url.QueryUnescape(s)
        if e != nil {
            return e.Error()
        } else {
            return s
        }
    }

    现在大部分站点都开启https来保证数据安全。

    展开全文
  • 微信小程序 - 菜单左右联动示例

    千次阅读 2019-05-06 23:31:27
    今天记录一个个人写的二级联动示例。 下面是效果图: 功能实现关键是使用控件scroll-view,下面直接上示例代码。 页面对应的js文件: Page({ data: { select_index:0, scroll_height:0, left: [{ id: ...
  • 微信小程序多级联动实现

    千次阅读 2019-03-14 15:43:46
    小程序实现联动下拉列表,为实现联动润滑的效果,需要将联动用到的所有数据请求到,然后再逻辑处理这些数据,避免选中上一级,下一级结果出现迟缓卡顿的现象 第一步,小程序端向后端php请求所有用到的区划数据 ...
  • 微信小程序仿美团点餐,仿饿了么,左右联动 微信小程序
  • 问:微信小程序菜单内容左右联动 (此图片来源于网络,如有侵权,请联系删除! ) 如图所以,左侧是菜单栏,右侧是主体内容,点击左侧菜单,右侧滑动到相应的位置;右侧滑动过程,也会改变左侧菜单的选中状态。本人的...
  • 并且获取数据的长度(需要根据长度来计算元素的高度),通过遍历数据的内容通过题目和元素个数的相加得到高度,当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动,左边的菜单点击...
  • scroll-view实现商品左右联动 文章目录scroll-view实现商品左右联动scroll-view使用效果图wxmljswxss数据结构效果图 scroll-view使用 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS ...
  • 联动菜单左右侧菜单)实现【微信小程序】 最近为了实现课程设计,也做了一些前端的东西,今天想要做一个联动菜单来实现一些功能。实现了,也来做做笔记。 第1步:了解一下 左右侧菜单其实简单来讲就是把一个区域...
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  •  从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都预示着张小龙以及团队当初的布局...
  • 最近项目(微信小程序项目)有一个需求,有一些多级结构的数据,需要一个树形的级联菜单来显示内容,类似如下: : 然而,在实现的时候却意外的遇到了困难。。 实现树形级联菜单遇到的困难 其实应该说是实现无限...
  • 问题:真机测试,自定义的多级联动进入页面第一次选择无法触发bindcolumnchange,导致联动失败, 第二次选择时则有可以了。 原因:value的值不对! value array [] 表示选择了 range 中的第几个(下标从 0 开始) ...
  • 微信小程序scroll-view实现左右联动

    千次阅读 2019-11-02 15:17:54
    微信小程序利用scroll-view实现左右联动 点击左边的按钮时,右边可以跳动到指定的位置 首先要注意使用scroll-view竖屏滚动,需要给scroll-view固定高度 其次在点击时,需要给需要滚动的scroll-view加上scroll-...
  • 微信小程序左右列表联动

    千次阅读 2018-10-24 13:40:31
    效果图: 直接上代码: wxml界面: &lt;view class='header'&gt; &lt;text class='headerClass'&gt;分类&lt;/text&gt; &lt;text class='headerPin'&...image s
  • 1、微信小程序菜单内容左右联动   小程序无法获取元素的宽高,位置信息,只能通过后台计算,但是存在较大的机器误差,不知有啥好的解决方案?git地址:https://github.com/Panfen/lumm (此图片来源于网络,如有侵权...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,843
精华内容 737
关键字:

微信小程序左右联动菜单

微信小程序 订阅