uniapp实现仿京东左右联动活动（商品分类）

第一步，页面布局

<view class="u-wrap"><view class="u-menu-wrap"><scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" :scroll-into-view="itemId"><view v-for="(item,index) in flist" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active':'']" @tap.stop="swichMenu(index)"><text class="u-line-1">{{item.name}}</text></view></scroll-view><scroll-view scroll-y scroll-with-animation :scroll-top="scrollRightTop" class="right-box" @scroll="rightScroll"><view class="page-view"><view class="class-item" :id="'item' + index" v-for="(item,index) in slist" :key="index"><view class="item-title"><text>{{item.name}}</text></view><view class="item-container"><view class="thumb-box" v-for="(item1,index1) in item.children" :key="index1" @click="featureC(item1.id)"><image :src="item1.img_url" class="item-menu-image" mode=""></image><view class="item-menu-name">{{item1.name}}</view></view></view></view></view></scroll-view></view></view>

第二步：css部分，这里就自己写了，按照自己的项目效果图自己调一下效果

第三步：js部分

1、

data() {return {scrollTop: 0, //tab标题的滚动条位置oldScrollTop: 0, // tab标题的滚动条旧位置current: 0, // 预设当前项的值menuHeight: 0, // 左边菜单的高度menuItemHeight: 0, // 左边菜单item的高度itemId: '', // 栏目右边scroll-view用于滚动的idscrollRightTop: 0, // 右边栏目scroll-view的滚动条高度arr: [], // 储存距离顶部高度的数组timer: null, // 定时器flist: [], //左侧一级分类slist: []  //右侧一级+二级分类，构造可以嵌套的数组结构}},

2、点击左侧分类事件

/*** 点击左边的栏目切换* @index 传入的 ID*/async swichMenu(index) {if(this.arr.length == 0) {await this.getMenuItemTop();}if (index == this.current) return;this.scrollRightTop = this.oldScrollTop;this.$nextTick(function(){this.scrollRightTop = this.arr[index];this.current = index;this.leftMenuStatus(index);})},

3、右侧滑动事件

async rightScroll(e) {this.oldScrollTop = e.detail.scrollTop;if(this.arr.length == 0) {await this.getMenuItemTop();}if(this.timer) return ;if(!this.menuHeight) {await this.getElRect('menu-scroll-view', 'menuHeight');}setTimeout(() => { // 节流this.timer = null;// scrollHeight为右边菜单垂直中点位置// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;// scrollHeight为右边菜单头部位置let scrollHeight = e.detail.scrollTop + 20;for (let i = 0; i < this.arr.length; i++) {let height1 = this.arr[i];let height2 = this.arr[i + 1];if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {this.leftMenuStatus(i);return ;}}}, 10)},

4、页面初始化时，获取右边每个节点距离顶部的高度，主要用于判断是否滑动，比如右边数据比较少的时候就不会在滑动

onReady() {this.getMenuItemTop()
},getMenuItemTop() {new Promise(resolve => {let selectorQuery = uni.createSelectorQuery();selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行if(!rects.length) {setTimeout(() => {this.getMenuItemTop();}, 10);return ;}rects.forEach((rect) => {// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)// this.arr.push(rect.top - rects[0].top);this.arr.push(rect.top)resolve();})}).exec()})},

5、基础功能函数

/*** 观测元素相交状态* 检测右边scroll-view的id为itemxx的元素与right-box的相交状态* 如果跟.right-box底部相交，就动态设置左边栏目的活动状态*/async observer() {this.tabbar.map((val, index) => {let observer = uni.createIntersectionObserver(this);observer.relativeTo('.right-box', {top: 0}).observe('#item' + index, res => {if (res.intersectionRatio > 0) {let id = res.id.substring(4);this.leftMenuStatus(id);}})})},/*** 设置左边菜单的滚动状态* @index 传入的 ID*/async leftMenuStatus(index) {this.current = index;// 如果为0，意味着尚未初始化if (this.menuHeight == 0 || this.menuItemHeight == 0) {await this.getElRect('menu-scroll-view', 'menuHeight');await this.getElRect('u-tab-item', 'menuItemHeight');}// 将菜单活动item垂直居中this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;},/*** 获取一个目标元素的高度* @elClass 元素的类名* @dataVal 储存高度的对象*/getElRect(elClass, dataVal) {new Promise((resolve, reject) => {const query = uni.createSelectorQuery().in(this);query.select('.' + elClass).fields({size: true}, res => {// 如果节点尚未生成，res值为null，循环调用执行if (!res) {setTimeout(() => {this.getElRect(elClass);}, 10);return;}this[dataVal] = res.height;resolve();}).exec();})},

主要是uniapp操作dom节点的时候不是很方便，核心的实现原理其实跟jq一样

uniapp实现仿京东左右联动活动（商品分类）相关推荐

手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
android 高仿拼多多,Android 仿京东、拼多多商品分类页
最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取. 先放一个写完之后的样子: 2017-08-09_16_51_34.gi ...
Android仿京东收货地址
Android仿京东三级联动收货地址 1.在本地新建assets目录,存放三级联动json数据,取本地json数据作为数据源 String data = com.miles.zcstc.fingerd ...
html商品分类列表页面,仿京东商城系列7------商品分类页面
前言本文我们将一起实现一个仿京东商品分类页面.废话不说,上图: 商品分类.gif 内容商品分类展示页面涉及到的技术有Okhttp , Fresco加载机制,MaterialRefreshLayou ...
仿京东、饿了么左右联动菜单列表自定义View
仿京东.饿了么左右联动菜单列表这是一个左右联动的自定义View 这里本人将两个列表进行了联动封装,使用的时候调用方法即可,方便快捷,扩展性也强. 完整Demo传送门效果图: 正题开始: 我们看一 ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
vue 实现仿京东、淘宝省市区三级联动
vue 实现仿京东.淘宝省市区三级联动在做电商或其他项目的时候,物流我们肯定会集成进去,那么我们肯定需要集成地址管理,地址管理除了最基本的省.市.区外,我们还要单独添加一个详细地址字段,不然我们无法 ...
h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
微信小程序】仿京东商品分类界面
微信小程序]仿京东商品分类界面要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化 ...

uniapp实现仿京东左右联动活动（商品分类）

uniapp实现仿京东左右联动活动（商品分类）相关推荐

最新文章

热门文章