小程序scroll-view实现左右联动

自己动手开始做一个点餐系统试试手,想要实现点击左边分类,右边进行模块跳转的功能.一开始摸索了很久,看不懂官方文档关于scroll-into-view这一属性的定义.后动手实操+百度终于搞懂,下面附上代码

wxml:

<scroll-view class="scroll" scroll-y>
          <view wx:for="{
  { left }}" bindtap="scroll" data-id="{
  {index}}">{
  { item }}</view>
        </scroll-view>
        
        <scroll-view class="content" scroll-y scroll-into-view="{
  { intoindex }}" scroll-with-animation>
          <view wx:for="{
  { content }}" id='content{
  {index}}'>{
  { item }}</view>
        </scroll-view>

js:

data: {
    left: ['推荐', '甜汤', '促肉', '包类'],
    content: {
      0: ['薏米', '花生浆'],
      1: ['薏米', '黑米', '八宝粥', '花生浆'],
      2: ['薏米促肉', '粿条促肉','面促肉'],
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值