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

使用小程序bindscroll实现联动

  1. 需求分析
    要求实现的功能是左侧展示分类名,右侧展示商品,点击任意分类可以跳转分类所包含的商品的第一个,滑动商品列表至下一分类时左侧所属分类高亮。

  2. 思路
    首先实现点击左侧分类右侧商品滑动,这里使用小程序提供的 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代码,
      
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值