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


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 相关文章推荐
JavaScript 事件入门知识
Apr 13 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
JavaScript实现星级评分
Jan 12 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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新手上路(十二)
2006/10/09 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python+pyqt5编写md5生成器
2019/03/18 Python
py-charm延长试用期限实例
2019/12/22 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
省三好学生申请材料
2014/01/22 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
群众路线领导对照材料
2014/08/23 职场文书
聘任书范文大全
2015/09/21 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
golang判断key是否在map中的代码
2021/04/24 Golang
对PyTorch中inplace字段的全面理解
2021/05/22 Python