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


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实现的一个include函数
Jul 21 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python使用tornado实现登录和登出
2018/07/28 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python实现手势识别的示例(入门)
2020/04/15 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
党委书记岗位职责
2013/11/24 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
就业协议书样本
2014/08/20 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书