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

2024-10-03 11:06:01

前言

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

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

实现思路

在这里，右则每一项的高度都是固定的，方便定位当前滑动距离在哪一个大项（左则）里。右则的 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
 });
 },

总结

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

微信小程序实现商品属性联动选择

本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码,供大家参考,具体内容如下效果演示: 代码示例 1.commodity.xml   <view class="commodity_attr_list">  <view class="a
微信小程序 ecshop地址三级联动实现实例代码

微信小程序 ecshop地址3级联动实现实例代码 picker标签,官方给出的实例: <view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
微信小程序时间标签和时间范围的联动效果

本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的.将start.end时间放在data里,radio发生改变时,改变data中的时间.当picker中的值发生改变时,如果时间范围已经超出了
微信小程序实现左右列表联动

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下效果图: 直接上代码: wxml界面: <view class='header'> <text class='headerClass'>分类</text> <text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'&g
微信小程序使用picker封装省市区三级联动实例代码

微信小程序使用picker封装省市区三级联动实例目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法
微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图源码传送门 picker和picker-view组件在正式介绍实
微信小程序三级联动选择器使用方法

本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas
微信小程序实现联动选择器

本文实例为大家分享了微信小程序实现联动选择器的具体代码,供大家参考,具体内容如下 picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1.普通选择器 mode = selector(默认的) <view class='picker'>普通选择器</view> <!-- value: value值表示选择了让的第几个,index===下标从0开始
微信小程序实现购物页面左右联动

本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下效果图: wxml <view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view class="
微信小程序实现左右联动的实战记录

前言最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考. 最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置. 实现思路在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里.右则的 scroll-view 使用了一项关键的属性:scroll-into-view,这个属性用来确定 scrollTop 的值的,当 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等时
一次微信小程序内地图的使用实战记录

前言今天在做新需求的时候发现个很尬的问题:我们项目的小程序是直接输入账号密码进行登录的,不是平常的获得用户授权登录的模式,所以当我使用wx.getLocation一直拉不下来授权一直进fail不去success的时候我开始慌了我以为是由于这个登录模式不同导致,然后我就开始疯狂骚扰我的小伙伴,问是不是这种登录模式会拉不到用户授权(在这里感谢我的小伙伴们没打死我,反而认真给我解惑),后来我清了下开发者工具缓存就能拉下来了(在这里求求TX的大佬们再做做开发者工具的优化吧,写原生的真的要流泪了
微信小程序实现左右联动

本文实例为大家分享了微信小程序实现左右联动的具体代码,供大家参考,具体内容如下最近学校课程系统分析项目使用了微信小程序来进行搭建,在选择了点餐项目后,对主页进行实现时,想要实现像麦当劳点餐一样,左边表示类别,右边表示菜品,通过点击左边的类,右边会滚动到对应的类,滚动右边的菜品,左边当前滚动到的菜品类别也回高亮显示.那么首先先展示一下成果吧! 虽然这个功能很小,但我觉得一旦搞清楚scroll-view的原理就很有用处. 首先查看微信小程序的官方文档:scroll-view 下面来按照我自己的理解
详解微信小程序工程化探索之webpack实战

前言微信小程序因为其便捷的使用方式,以极快的速度传播开来吸引了大量的使用者.市场需求急剧增加的情况下,每家互联网企业都想一尝甜头,因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能.但小程序开发当中总有一些不便一直让开发者诟病不已,主要表现在: 初期缺乏方便的npm包管理机制(现阶段确实可以使用npm包,但是操作确实不便) 不能使用预编译语言处理样式无法通过脚本命令切换不同的开发环境,需手动修改对应环境所需配置(常规项目至少具备开发与生产环境) 无法将规范检查工具结合到项目工程中(
Echarts在Taro微信小程序开发中的踩坑记录

背景近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小由于笔者对e
微信小程序开发篇之踩坑记录

最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的
微信小程序全局配置之tabBar实战案例

目录全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤 3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面 5. 步骤3 - 配置 tabBar 选项 6. 完整的配置代码总结全局配置 - tabBar 1. 什么是 tabBar tabBar 是移动端应用常见的页面效果, 用于
微信小程序+ECharts实现动态刷新的过程记录

前言最近遇到了一个需求,就是要在小程序中实时刷新图表,最开始选择的是wx-chart,然后发现不能满足我的需求,最后选择了ECharts,也踩了一些坑,通过在网上收集资料,终于弄出来了,记录下我实现的过程. 方法实例 1.首先到ECharts官网下载它的例子,然后把ec-canvas文件拷贝下来放到你自己的项目中: 2.然后在你需要用的页面引入,在xxx.json中加入,这里要注意路径,我的页面统一是放在pages文件夹中的: "usingComponents": { "e
微信小程序引入Vant框架的全过程记录

前言有时候会觉得微信小程序原生的ui差了那么一点点感觉,那么能不能引入三方框架呢?本文以引入Vant来进行举例,共包含8个步骤.不管是不是云开发项目都一样使用. 实现步骤 1. 打开微信小程序的开发工具,进入项目.在项目的根目录文件上点击右键.选择在终端中打开.(注意是根目录) 2. 在命令窗口中键入npm init.然后所有配置都按默认配置进行,只需点击回车键即可. 3. 在命令窗口中键入npm install进行构建,成功之后会在根目录下生成 package.json 和 package-
微信小程序获取手机号的踩坑记录

前言最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内具体代码 <view class="cu-form-group"> <view class="title text-black">联系电话</view>

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

相关推荐

随机推荐