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


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函数
Aug 19 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
PHPUnit安装及使用示例
2014/10/29 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python自动发送邮件脚本
2018/06/20 Python
利用python循环创建多个文件的方法
2018/10/25 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python中while和for的区别总结
2019/06/28 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
科级干部考察材料
2014/02/15 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
教师听课评语大全
2014/12/31 职场文书
法制主题班会教案
2015/08/13 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python