微信小程序实现左右联动

本文实例为大家分享了微信小程序实现左右联动的具体代码，供大家参考，具体内容如下

最近学校课程系统分析项目使用了微信小程序来进行搭建，在选择了点餐项目后，对主页进行实现时，想要实现像麦当劳点餐一样，左边表示类别，右边表示菜品，通过点击左边的类，右边会滚动到对应的类，滚动右边的菜品，左边当前滚动到的菜品类别也回高亮显示。那么首先先展示一下成果吧！

虽然这个功能很小，但我觉得一旦搞清楚scroll-view的原理就很有用处。

首先查看微信小程序的官方文档：scroll-view

下面来按照我自己的理解介绍我所使用到的属性：

• scroll-y: 设置滚动的方向，x就是横着，y就是竖着，属性的类型是boolean值
• scroll-top:就是说scroll-top的值是距离顶部的值，你将它写在哪个scroll-view中，scroll-view就距离顶部多远，不过我们可以设置变量值，在js中按照条件更改它，这也是实现左右联动的关键步骤。
• scroll-into-view: scrol-into-view就是一个id值，我们实现左右联动是竖直方向上的滚动，所以设置scroll-into-view就是说当前scroll-into-view的值是多少，那么当前所在的scroll-view就会滚动到哪个id。
• style=‘height：这里输入高度'，你设置的要滚动的组件必须有个高度，否则就不会进行滚动，这也很好理解，你不设置一下他框的高度，那scroll-view也不知道从哪里开始滑呀是不是。有时候需要在页面中央（只占部分高度）设置一个滑块，有时候需要在整个窗口高度设置，所以高度也是必须的一个属性。
• scroll-with-animation：是在设置滚动条位置进行动画过渡，我发现删除该属性也可以正常使用，可能在我写的页面暂时没有使用到吧，之后还需在进行了解
• bindscroll：绑定一个函数，由于是滚动，没有点击触发，故有一个绑定的函数，用于在滑动时执行函数内容
• 好的既然搞清楚组件的属性，那么我们开始实现吧，我的思路是左右各设置一个滑块，两边都可以滑，先实现左边联动右边，左边的功能是点击类右边就可以进行跳转

    
    

    {{item.name}}
    

    
    个
    
    
    
  
  
  
  
    
    {{item.name}}
    
      
        
        {{item.categroy_name}}
        ￥ {{item.price}} 元
        
          -
          {{item.num}}
          +
            
      
    
    
    

可以看到高度我是引用了一个变量，其在js中的实现如下：

wx.getSystemInfo({
      success: function (res) {
        var asideheight = res.windowHeight
        var asideheight1=0;
        that.setData({
          asideheight: asideheight,
          asideheight1:asideheight+80
        })
      },
      fail: () => { console.log("无法获取显示器高度，请检查网络连接") }
    });

并且在函数开头设置好左右每一小格的高度

const RIGHT_BAR_HEIGHT = 41;
// 右侧每个子类的高度（固定）
const RIGHT_ITEM_HEIGHT = 122;
// 左侧每个类的高度（固定）
const LEFT_ITEM_HEIGHT = 41;

左边的实现较为简单，设置两个个data，currentLeftSelected和itemScrollId当前点击的类的ID值赋给这两个，前者实现点击时左边类被选定的状态，而右边的值赋给 itemScrollId，然后再将这个值赋给前端右半边scroll-view的scroll-into-view，从而实现左边点击右边也跳转。

tabMenu: function (e) {
    this.setData({
      currentLeftSelected: e.target.id || e.target.dataset.id,
      itemScrollId: e.target.id || e.target.dataset.id 
    });
    console.log(e);
  },

右半边的思路就是你需要算出右边每一个菜品距离顶部的高度，保存至一个数组里，然后滑动时获取当前滑动的高度，然后在bindscroll里绑定的函数里进行比较，对应的是哪个高度的范围就设置左边的currentLeftSelected为那个类的id。

get_eachItemToTop: function () {
    var obj = {};
    var totop = 0;
    var menus_ex = {};
    var that = this;
    menus_ex= that.data.menus;
    console.log(menus_ex);
    for(let i=1;i= left) {
       this.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }
   
    },

这样左右联动就基本实现了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。