微信小程序点击分类跳到对应商品，滚动商品，对应详情选中

最新推荐文章于 2024-04-07 23:17:23 发布
最新推荐文章于 2024-04-07 23:17:23 发布
阅读量2.3w 收藏 52
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42488377/article/details/81162676
版权

首先我们先展示怎么分类选中的写法

动态绑定navActive的值，来决定哪个分类被选中，选中类则为active,否则为空，将选中样式写到active里。

然后为点左边右边跳到相应商品，这里主要用到的锚点，小程序在scroll-view里提供了一个scroll-into-view 

 index.wxml

左边分类部分

右边商品部分

这时点击左边右边就可以滚动到相应的商品啦，现在我们接着做右边滚动，左边对应分类选中。

尤其此次是在实际项目中做的，有些数字的写法也是通过项目的数字写的，所以早写代码的时候一定要考虑要不要，去理解思路，不可硬搬

这里的绑定的高度是scroll-view的高度，因为我这里有一个50px的head，所以才减50，请根据实际情况决定写法

获得每个元素据顶部的高度，组成一个数组，通过高度与scrollTop的对比来知道目前滑动到那个区域，里面的34,90也视实际情况定

因为是通过实时监控来判断的，如果判断完了以后就绑定数据的话，就会不停的setData,所以我这里设置了一个lastActive,只有每次被选中分类变的时候，才会setData

 

 

蒲公英的种子，飘吧
关注
微信小程序 - 最新详细实现 “左侧菜单，右侧内容“ 左右联动商品分类页面，左边是导航分类右侧是自定义内容，左侧分类菜单，右侧列表双向联动效果，左右二级联动，仿京东淘宝商城分类页面、美团外卖点餐界面！
王佳斌
07-23 3015
微信小程序，vue2，vue3，左右联动菜单，商品分类页面，左分类右列表，小程序实现左侧菜单，右侧列表双向联动效果，侧边菜单和右边滚动条，电商项目，点击菜单子分类联动对应商品，分类左右联动，上拉加载以及下拉刷新，右侧列表双向联动，商品分类左右联动，scroll-view，锚点，点击左侧大类后侧列表跟着变跟着刷新，微信小程序实现菜单左右联动效果，左菜单 右边列表数据，左侧菜单,右侧列表双向联动效果，右侧商品滑动时，左侧分类导航栏的相应分类被选中，商城分类滚动列表锚点(左菜单右列表)，美团外卖，京东商城，淘宝商
微信小程序-页面开发
qq_44715376的博客
01-02 2686
页面开发
微信小程序点击分类跳到对应商品，滚动商品，对应详情选中,
hjiaqing的博客
03-13 1931
直接上代码，自己领悟吧，有不足这处请留言 wxml <view class="detail_container"> <!-- 返回按键 --> <x-back class="back"/> <view class="topnav" hidden='{{hiddenTopNav}}'> <block wx:for="{...
微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）
热门推荐
michael的博客
04-14 5万+
在商场项目中，一般都会有分类页面。 分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图 布局分析： 主盒子> 左盒子>左盒子> 右盒子>右盒子> 主盒子> 左盒子使用标准流 右盒子使用绝对定位（top、right） wxml： {{item.tree.desc}}
微信小程序分类：右侧商品滑动时，左侧分类导航栏的相应分类被选中
yao_1063066968的博客
12-21 1585
<view class="spread-cateBox"> <!-- <view> --> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='spread-cateLeft' style='height: {{winHeight}}px'> <block wx:for="{{tabs}}" wx:key="index"
微信小程序_(组件)scroll-view可滚动视图
weixin_30873847的博客
03-30 1098
　　微信小程序scroll-view组件官方文档　　传送门 　　提前准备：使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary <view > <!-- 手指按下后1s样式由a改变为d，手指松开后2s样式由d改变回a --> <...
小程序之点击跳转到对应内容
weixin_33766805的博客
05-31 1519
我在写页面的时候，遇到一个问题，点击不同的按钮，跳转到不同的区域，这个怎么 实现呢？一开始我用了计算的方式，推理出公式，按照ilphone6的标准，功能实现了。 我本来以为没有问题了，结果换了一个手机，变成了iPhone5，又不对了。因为在wxml中，设置的元素的具体尺寸不同设备有不同的换算比例，那么就不能用具体的公式定义， 后来，我研究了小程序组件scroll-view。发现如果用这个组件，...
原生微信小程序开发学习笔记（零基础）
qq_33365152的博客
09-08 252
原生微信小程序开发学习笔记（适合零基础）
微信小程序（快速开发）
m0_55015716的博客
02-11 484
微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。
微信小程序 uniapp 电商项目使用scroll-view实现左右菜单联动，点击菜单子分类联动对应商品
ilcn1949的博客
05-31 3650
uniapp的scroll-view用法，实现菜单滚动联动效果。
微信小程序点击滚动到指定位置的实现
11-20
公司项目要做一个类似微信通讯录导航的效果，点击右侧字母页面滚动到相应位置。 因为微信小程序没有dom概念，所以不能使用锚点，也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息： let query = wx.createSelectorQuery().in(this); query.selectViewport().scrollOffset() query.select("#Nav").boundingClientRect(); query.select("#FilterNav").boundingClientRect(); query.selec
小程序demo--左侧栏分类
04-17
左侧栏分类
微信小程序三级分类动态加载数据
04-14
使用微信小程序的框架完成的；公司需要，开始没找到，后来放弃了，就自己写了一下，发现虽然不难，但是也听绕的
微信小程序商品到详情的实现
12-29
微信小程序商品到详情结构代码资源分享给大家. 商品页 post.wxmldata-postid={{index}}view class=container swiper indicator-dots indicator-color=rgba(255,255,255,0.3) indicator-active-color=rgba(255,255,255,1) autoplay swiper-item image src= ... 商品页 post.wxml data-postid={{index}} <view class=container> <swiper ind
微信小程序商品展示界面源码demo
10-26
当初自己根据微信小程序开发文档写的一个demo,商品分类展示功能。
微信小程序 scroll-view 自适应滚动视图
iamcrystal94的博客
06-07 4407
scroll-view详解通过获取设备高度来设置滚动视图高度。可以把滚动元素的高度也依此类推设置，这里不多说。style="height:{{height}}px;"index.wxml &lt;!--index.wxml--&gt; &lt;view class="section"&gt; &lt;view class="section__title"&gt;vertical scroll&am
微信小程序实现滚动标签
最新发布
weixin_74385534的博客
04-07 544
【代码】微信小程序实现滚动标签。
微信小程序点击卡片跳转到对应详情
夏天的博客
12-09 2670
效果图 源代码 //不会的点：不知道怎么获取后端返回的链接地址值，动态的跳转到不同详情内容 //解决方案：在方法里面加参数（这就是带参数的意义） x-activity-card.vue <template> <view class="notice-box"> <!-- 通知公告 --> <view class="parkNotice-card" v-for="(item, index) in listData"
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值