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


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验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jquery手风琴特效插件
Feb 04 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Vue数据绑定简析小结
May 07 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
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的输入输出流
2007/02/14 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
javascript操作cookie
2017/01/17 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python 字符串split的用法分享
2013/03/23 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python3的socket使用方法详解
2020/02/18 Python
Python图像读写方法对比
2020/11/16 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Linux的文件类型
2012/03/07 面试题
Unix/Linux开发面试题
2016/08/16 面试题
职业生涯规划设计步骤
2014/01/12 职场文书
法人代表任命书范本
2014/06/05 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电