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


Posted in Javascript onJuly 05, 2018

前言

最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考。

最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置。

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

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

实现思路

在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里。右则的 scroll-view 使用了一项关键的属性:scroll-into-view,这个属性用来确定 scrollTop 的值的,当 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等时,scroll-view 会定位到该元素,scrollTop 的值就是滑动到该元素的值。

做这个功能的时候,遇到一个问题,就是右则的小项种类不多的时候,例如某个类目只有1~2个,那么点击左则的大项的时候,会出现点击不到的现象。这里可以用点小技巧来解决:

点击左则大项的时候,设置当前点击标记为true,设置 classifySeleted 为当前点击的项目。 然后在滑动触发函数(onGoodsScroll)里面,判断当前触发滑动是否点击产生的,如果是,则不设置 classifySeleted  的值,否则就计算 classifySeleted 的值并设置。

示例代码:

wxml代码如下:

<view class="content-container">
  <scroll-view class="classify-container" scroll-y="true">
   <view class="classify {{classifySeleted==classify.typeId?'active':''}}" wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id" data-id="{{classify.typeId}}" bindtap="tapClassify">
    <view class="name">{{classify.typeName}}</view>
   </view>
  </scroll-view>
  <scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{'inToView' + typeIndex}}" bindscroll="onGoodsScroll" scroll-top="{{scrollTop}}">
   <view wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id">
    <view class="title" id="{{'inToView'+classify.typeId}}">{{classify.typeName}}</view>
    <view class="goods" wx:for="{{classify.productIds}}" wx:for-item="cake" wx:key="id">
     <image class="pic" src="{{cake.imgSrc}}" data-src="{{cake.imgSrc}}" data-list="{{cake.imgSrc}}" bindtap="tapImg"></image>
     <view class="name ellipsis">{{cake.name}}</view>
     <view class="sold">{{cake.introduce}}</view>
     <view class="price">¥{{cake.price}}</view>
    </view>
   </view>
  </scroll-view>
 </view>

js代码如下:

onGoodsScroll: function (e) {

 var scrollTop = e.detail.scrollTop;
 var h = 0;
 var classifySeleted = this.data.classifySeleted;
 var titleHeight = Math.ceil(70 * this.data.percent);
 var itemHeight = Math.ceil(180 * this.data.percent);

 this.data.cakeTypes.forEach(function (classify, i) {
  console.log("h:" + h + " scrollTop:" + scrollTop);
  var _h = titleHeight + classify.productIds.length * itemHeight; 
  if (scrollTop >= h - 10) {
  classifySeleted = classify.typeId;
  }
  h += _h;
 });

 if (this.data.isTap) {
  this.setData ({
  isTap: false
  })
 } else {
  this.setData({
   classifySeleted: classifySeleted
  }); 
 } 
 },

 tapClassify: function (e) {
 var id = e.target.dataset.id;
 this.setData({
  isTap: true,
  classifySeleted: id,
  typeIndex: id
 });
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
AngularJS内置指令
Feb 04 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue实现自定义多选与单选的答题功能
Jul 05 #Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 #Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 #Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 #Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 #Javascript
vue两个组件间值的传递或修改方式
Jul 04 #Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
You might like
php 函数使用方法与函数定义方法
2010/05/09 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
深入浅出php socket编程
2015/05/13 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
splice slice区别
2006/10/09 Javascript
Javascript之文件操作
2007/03/07 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
护理职业应聘自荐书
2013/09/29 职场文书
安全生产月宣传标语
2014/10/06 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
Go语言基础知识点介绍
2021/07/04 Golang