微信小程序实现左右联动

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

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

虽然这个功能很小,但我觉得一旦搞清楚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:绑定一个函数,由于是滚动,没有点击触发,故有一个绑定的函数,用于在滑动时执行函数内容
  • 好的既然搞清楚组件的属性,那么我们开始实现吧,我的思路是左右各设置一个滑块,两边都可以滑,先实现左边联动右边,左边的功能是点击类右边就可以进行跳转
<scroll-view class='aside' scroll-y='true' style='height:{{asideheight}}px' scroll-with-animation="true" scroll-top='{{itemLeftToTop}}'  >

    <view  wx:for="{{menus}}" wx:key="id"  data-id="{{item.id}}" bindtap='tabMenu' class="{{item.id === currentLeftSelected ? 'menu active' : 'menu'}}">

    <view id="{{item.id}}">{{item.name}}</view>
    </view>

    <view class="option" >
    <button id='user_btn' bindtap='getin' >个</button>
    <image id='user_img' src='../../images/index/user_option.png'></image>
    </view>

  </scroll-view>
  <!--每一类菜品的具体信息,可进行按钮添加每个菜品的数量-->

  <scroll-view class="item-content" scroll-y='true' scroll-into-view="{{itemScrollId}}" scroll-with-animation='true' style='height:{{asideheight}}px'  bindscroll="right" >
    <view wx:for="{{menus}}" wx:for-index="parentIndex" wx:key="id" id="{{item.id}}" >
    <view class="item_title">{{item.name}}</view>
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{item.categroy}}" wx:key="categroyid" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>
        <image  src="{{item.url}}"></image>
        <text class="title">{{item.categroy_name}}</text>
        <text class="price">¥ {{item.price}} 元</text>
        <view class="opera">
          <text class="btn_price " bindtap='del' data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index='{{index}}'>-</text>
          <text class="num">{{item.num}}</text>
          <text class="btn_price" bindtap="add" data-id="{{item.id}}"  data-parentIndex='{{parentIndex}}' data-index="{{index}}">+</text>
        </view>
      </view>
    </view>

    </view>
</scroll-view>

可以看到高度我是引用了一个变量,其在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<menus_ex.length;i++){
      totop += (RIGHT_BAR_HEIGHT + menus_ex[i - 1].categroy.length * RIGHT_ITEM_HEIGHT);
      obj[menus_ex[i] ? menus_ex[i].id : 'last'] = totop;
    }
    return obj;
  },

  right: function (e) {
      for (let i = 0; i < this.data.menus.length; i++) {
       let left = this.data.eachrightScrollToTop[this.data.menus[i].id]
       let right = this.data.eachrightScrollToTop[this.data.menus[i + 1] ? this.data.menus[i + 1].id : 'last']
       if (e.detail.scrollTop < right && e.detail.scrollTop >= left) {
       this.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }

    },

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

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

(0)

相关推荐

  • 微信小程序scroll-view实现左右联动

    本文实例为大家分享了微信小程序scroll-view实现左右联动的具体代码,供大家参考,具体内容如下 需求:项目中做了一个选择城市的需求,要求全国所有的省市区都按照中文首字母分类并排序,左侧的城市列表和右侧的字母列表实现双向联动. 第一步:根据腾讯提供的javascript SDK提供的接口,获取所有的省市区,并将省市区按照首字母进行分类排序. let _this = this; _this.mapCtx = wx.createMapContext("myMap"); // 实例化AP

  • 微信小程序实现购物页面左右联动

    本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下 效果图: wxml <view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view class="

  • 微信小程序实现左右联动的实战记录

    前言 最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考. 最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置. 实现思路 在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里.右则的 scroll-view 使用了一项关键的属性:scroll-into-view,这个属性用来确定 scrollTop 的值的,当 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等时

  • 微信小程序实现菜单左右联动

    本文实例为大家分享了微信小程序实现菜单左右联动的具体代码,供大家参考,具体内容如下 今天记录一个个人写的二级联动示例. 下面是效果图: 功能实现关键是使用控件scroll-view,下面直接上示例代码. 页面对应的js文件: Page({ data: { select_index:0, scroll_height:0, left: [{ id: 1, title: '选项一' }, { id: 2, title: '选项二' }, { id: 3, title: '选项三' }, { id: 4

  • 微信小程序实现左右联动

    本文实例为大家分享了微信小程序实现左右联动的具体代码,供大家参考,具体内容如下 最近学校课程系统分析项目使用了微信小程序来进行搭建,在选择了点餐项目后,对主页进行实现时,想要实现像麦当劳点餐一样,左边表示类别,右边表示菜品,通过点击左边的类,右边会滚动到对应的类,滚动右边的菜品,左边当前滚动到的菜品类别也回高亮显示.那么首先先展示一下成果吧! 虽然这个功能很小,但我觉得一旦搞清楚scroll-view的原理就很有用处. 首先查看微信小程序的官方文档:scroll-view 下面来按照我自己的理解

  • 微信小程序 ecshop地址三级联动实现实例代码

    微信小程序 ecshop地址3级联动实现实例代码 picker标签,官方给出的实例: <view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

  • 微信小程序 使用picker封装省市区三级联动实例代码

    微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法

  • 微信小程序三级联动地址选择器的实例代码

    本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

  • 微信小程序三级联动选择器使用方法

    本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

  • 微信小程序实现联动选择器

    本文实例为大家分享了微信小程序实现联动选择器的具体代码,供大家参考,具体内容如下 picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1.普通选择器 mode = selector(默认的) <view class='picker'>普通选择器</view> <!-- value: value值表示选择了让的第几个,index===下标 从0开始

  • 微信小程序实现的picker多级联动功能示例

    本文实例讲述了微信小程序实现的picker多级联动功能.分享给大家供大家参考,具体如下: wxml部分: <picker mode="multiSelector" bindchange="bindjobcatchange" bindcolumnchange="bingjobcatcolumnchange" value="{{multiIndex}}" range="{{job_cat_list}}"

  • 微信小程序时间标签和时间范围的联动效果

    本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下 最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的.将start.end时间放在data里,radio发生改变时,改变data中的时间.当picker中的值发生改变时,如果时间范围已经超出了

随机推荐