微信小程序左右联动菜单

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

效果如图：

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:;}

.tui-fixed-left{width: 180rpx;height: 100%;border-right: 1px solid #dfdfdf;

position: fixed;background-color:#f5f5f5;top: 0rpx;left:;}

.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:;text-align: center;}

.menu-active{border-left:10rpx solid #5196ff;background-color:#f0f0f0;}

.content{padding:0 20rpx;position: fixed;top: 89rpx;right:;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:;}

.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

      }

    })

  },

})

微信小程序左右联动菜单的更多相关文章

微信小程序左右联动菜单（即可左联动，也可右联动）
 <view class="search"> <input class="search-box" place ...
微信小程序-多级联动
微信小程序中的多级联动这里用到的案例是城市选择器先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...
微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
微信小程序省市区联动，自定义地区字典
最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...
微信小程序 - 下拉菜单组件
使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端点击下载:小程序-下拉组件.
微信小程序之----底部菜单action-sheet
action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是 ...
微信小程序组件分页菜单点击请求
//JS data: { navNum:0, navList: [ { id: 1, name: '已预约' }, { id: 2, name: '已消费' }, { id: 3, name: '已取 ...
微信小程序制作下来菜单
wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...
微信小程序 -- 自定义抽屉式菜单（底部，从下向上拉出）
实现一个抽屉菜单的案例 wxml  <view class="btn" bindtap="powerDrawer" ...

随机推荐

django--没有整理，笔记
https://docs.djangoproject.com/en/2.2/常用的数据路命令:python manage.py makemigrations 数据移植准备python manage.p ...
DataSet,DataTable,DataView、DataRelation
一.创建Dataset和DataTable DataSet ds = new DataSet();//DataSetName默认为"NewDataSet" DataTable ta ...
vue1 自定义过滤器
jface viewer 全选
viewer.setSelection(new StructuredSelection(((List)viewer.getInput()))); StructuredSelection有多个构造方法, ...
16、生命周期-BeanPostProcessor原理
16.生命周期-BeanPostProcessor原理 16.1 打断点运行postProcessBeforeInitialization 可以看到先执行的顺序为: applyBeanPostProc ...
0、Spring 注解驱动开发
0.Spring注解驱动开发 0.1 简介 <Spring注解驱动开发>是一套帮助我们深入了解Spring原理机制的教程: 现今SpringBoot.SpringCloud技术非常火热,作 ...
FHS 层级文件系统
Java集合总结（一）：列表和队列
java中的具体容器类都不是从头构建的,他们都继承了一些抽象容器类.这些抽象容器类,提供了容器接口的部分实现,方便具体容器类在抽象类的基础上做具体实现.容器类和接口的关系架构图如下: 虚线框表示接口, ...
CSPS模拟75&76
感觉自己还是太菜了... 最近考试一直想不出来正解.难受(然而蒟蒻的博客没人看也要不来小猪peiqi的图) 模拟75:血炸... 考场上推了快两个小时的T1式子,然后心态炸裂,然后我也不知道自己干了什 ...
c++ 数据类型长度
#include <iostream> using namespace std; int main() { cout << "char: " << ...

微信小程序 左右联动菜单

微信小程序 左右联动菜单的更多相关文章

随机推荐

热门专题

微信小程序左右联动菜单

微信小程序左右联动菜单的更多相关文章