小程序学习：实现仿美团的商家首页之锚点实现分类和所属商品的联动

使用小程序bindscroll实现联动

需求分析
要求实现的功能是左侧展示分类名，右侧展示商品，点击任意分类可以跳转分类所包含的商品的第一个，滑动商品列表至下一分类时左侧所属分类高亮。
思路
首先实现点击左侧分类右侧商品滑动，这里使用小程序提供的 scroll-into-view方法，官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

右侧商品滚动页的框
<scroll-view  scroll-y='true' style="height:784rpx" scroll-with-animation="true" scroll-into-view="m_{{toView}}" bindscroll='scroll'>
<view id=' m_1'></view>
<view id=' m_2'></view>
</scroll-view>

其他先不管这里只看scroll-into-view="{{toView}}" 他代表这一滚动页，滚动到其下id为toView的组件，在左侧用bindtap=‘clickMenu’ 实现对toView的动态控制，

//分类栏的wxml代码，<scroll-view class='store-menu' style="height:784rpx" scroll-y='true'><view wx:for='{{menulist}}' wx:key="{{item.id}}" data-id="{{item.id}}" bindtap='clickMenu' class="menu-item {{curId == item.id ? 'menu-active': ''}}"><text>{{item.name}}</text></view><view style='height:90rpx'></view></scroll-view>


//点击左侧，控制右侧滑动 js代码clickMenu:function(e){var id = e.currentTarget.dataset.id;var name = e._relatedInfo.anchorTargetText;this.setData({curId: id,toView: id,menu_name: name,})},

上述实现左侧控制右侧的需求，接下来实现右侧控制左侧，右侧商品栏代码中有提到的bindscroll=‘scroll’ 这是官方给的滚动时触发的方法。
思路：首先我想控制左侧的商品所属的分类就要知道，这个分类所属的所有商品块有多长，这个长度往上滑动过去了我就知道不是这个分类了是下一个，这里的长度计算为距离顶部的长度，因为要根据对比属性scrollTop判断这一分类块有没有过去，scrollTop为滚动块往上滚动的长度，
实现：

//wxml
在左侧分类栏里加一个高亮方法，curId用来控制被选择时候高亮class="menu-item {{curId == item.id ? 'menu-active': ''}}"

bindscroll=‘scroll’ 中方法

scroll:function(e){var scrolltop = e.detail.scrollTop                           //获取滚动的长度，单位为px，var h=0                                                      //h为每个模块的长度 ，pxvar selectedid;                                               // 用来控制curId var coefficient = this.data.widthcoefficient              //根据机型的不同 商品展示长度不同，我在这里用了rpx转换px系数this.data.foodlist.forEach(function (item, i){var list_height = (item.food.length * 208) / coefficient    //这里list_height为每个分类的高度， 208 是rpx 单位商品展示长度// console.log('移动了'+scrolltop)// console.log('循环判断模块高度h为'+h)h += list_height;                                     //给每个分类计算距离顶部的高度，那这个对比滚动的长度if(scrolltop>=h){                                  // 判断滚动长度有没有超过分类的长度，selectedid=item.id                                 //如果超过了就给左侧的控制高亮的flag 赋值}});this.setData({curId:selectedid})

数据结构

//商品数据
foodlist: {[x: string]: any;id: string;food: {[x: string]: any;id: string;img: string;name: string;}[];
}[]
//分类数据
menulist: {[x: string]: any;name: string;id: string;
}[]
foodlist.id 和menulist.id 必须相同， 把俩结合起来也可以的自己看需求，这是上述代码的数据结构

小程序学习：实现仿美团的商家首页之锚点实现分类和所属商品的联动相关推荐

基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
2021外卖返利小程序饿了么美团外卖侠分销系统源码
外卖CPS红包小程序源码分享外卖返利小程序饿了么美团吃喝玩乐电影票对接公众号返利系统分销系统源码 [小程序]外卖CPS优惠券小程序平台v3.0源码外卖红包小程序美团外卖小程序饿了么外卖小程序 ...
php仿bilibili视频类模板,小程序练习，仿bilibili小程序
微信小程序学习仿哔哩哔哩制作的小程序(待完善) 项目预览图小程序?大改变? 之前就被朋友安利使用小程序,最近接近了小程序,发现了它竟然带来了一场"大革命". 简单说,它就是一 ...
【小盐巴学习笔记】—美团吃饭哪家强？Python词云分析告诉你
[小盐巴学习笔记]-美团吃饭哪家强?Python词云分析告诉你效果图前言一.爬虫分析 1.分析网址 2.分析数据二.完整代码 1.爬取美团牛排店评论 2.绘制词云图 3.词云分析总结效果图 ...
微信小程序学习日志（一）
微信小程序学习日志之工具配置及创建简单页面 1.任务与分工在这次点餐系统项目中,我和我所在的小程序组的共三个成员主要负责小程序前端的实现.我们针对菜单,点菜清单(结算页面)以及评论三个主要页面进行了 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
一周小程序学习第1天
2019独角兽企业重金招聘Python工程师标准>>> 一周小程序学习第1天今日正式开始小程序的学习! 对于刚上手的自学小白,技术选型是很重要的,这在一开始就决定了这条开发学习之 ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

小程序学习：实现仿美团的商家首页之锚点实现分类和所属商品的联动

使用小程序bindscroll实现联动

小程序学习：实现仿美团的商家首页之锚点实现分类和所属商品的联动相关推荐

最新文章

热门文章