微信小程序 简单的实现左右内容联动

微信小程序 简单的实现左右内容联动

请求到的数据 封装请求

实现方法

scroll-view 的属性scroll-into-view 可以实现类似于瞄点链接的效果，在绑定的属性修改时会触发，滑动到对应id的地方
注意： id不能以数字开头
设置两个变量tabIndex、nowIndex保存状态，如果只设置一个更新变量时会触发瞄点更新
通过tabIndex更新瞄点
通过nowIndex设置当前的分类(用来高亮当前的分类)
在按下分类时同时更新tabIndex、nowIndex
在滑动时通过判断没一个id的内容距离scroll-view 顶部的高度
如果等于或小于0表示该内容滑到了，只需要 更新nowIndex，如果更新`tabIndex了的话，会触发滑动

WXML

    <view class="main">
        <!-- 通过scroll-into-view 可以实现类型于 瞄点链接的效果 当 tabIndex 改变时 会自动划到id="scroll-x"处 -->
        <scroll-view class="category" scroll-with-animation
        scroll-into-view="scroll-{{nowIndex}}"
         scroll-y>
            <view wx:for="{{ list }}" wx:key="index" 
            id="scroll-{{ index }}"
            class="item {{ nowIndex==index?'active':'' }}" data-index="{{ index }}"
             bindtap="tabNav">
                {{ item.name }}
            </view>
        </scroll-view>
        <!-- 通过scroll-into-view 可以实现类型于 瞄点链接的效果 当 tabIndex 改变时 会自动划到id="scroll-x"处 -->
        <!-- 但是滑动内容不会更新scroll-into-view设置的值 -->
        <!-- 通过bindscroll监听滑动  -->
        <!-- id="scrollMenu"用于获取scroll-view到顶部的高度  -->
        <scroll-view id="scrollMenu" class="menu" scroll-with-animation scroll-y scroll-into-view="{{tabIndex}}" bindscroll="scroll">
        <!-- 注意：id 不能以数字开头 -->
        <!-- 注意：监听滚动条中通过goodItem获取商品分类列表 -->
            <view wx:for="{{ list }}" wx:key="index" 
            class="goodItem"
            id="scroll-{{index}}">
                <view class="title"> {{ item.name }}</view>
                <view wx:for="{{item.food}}" wx:key="indexs" class="item" wx:for-index="indexs" wx:for-item="items">
                    <view class="left">
                        <image src="{{ items.image_url }}" mode="widthFix" />
                    </view>
                    <view class="right">
                        <view class="msg">
                            <view class="name">{{ items.name }}</view>
                            <view class="price">￥{{ items.price }}</view>
                        </view>
                        <view bindtap="addCarList" class="btn">
                            +
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>

js

// pages/food/foodlist/foodlist.js
import api from '../../../utils/api/index';
Page({
    data: {
        list:[],
        carList:[],
        tabIndex:"scroll-0",//右边瞄点项
        nowIndex:0//颜色项
    },
    onLoad(options) {
        this.getList()
    },
    getList(){
        api.getFoodList().then(res=>{
            this.setData(res)
        })
    },
    tabNav(e){
        let index = e.currentTarget.dataset.index
        this.flag = true // 修复点击分类过快时，会因为滚动条的的滑动，调用scroll触发瞄点
        // 联动右边
        this.setData({nowIndex:index})
        this.setData({tabIndex:`scroll-${index}`})
    },
    addCarList(e){
        this.data.carList.push(e)
        this.setData({carList:this.data.carList})
    },
    /**
     * 联动分类
     * 滑动右侧商品列表，与之对应的左侧商品分类菜单高亮显示
     */
    scroll(e){
          if(this.flag){
            this.flag = false
            return
        }
        // 获取每个goodItem到顶部的距离
        // 减去顶部距离其他东西的距离
        // 如果距离小于或等于0则更新index
        // 设置最后更新index
        var index = this.data.nowIndex
        // scroll-view 距离顶部的高度
        var scrollMenuTop  = 0
        let query = wx.createSelectorQuery()
        query.selectAll('#scrollMenu').boundingClientRect()
        query.selectAll('.goodItem').boundingClientRect()
        query.exec(res=>{
            console.log(res);
            scrollMenuTop = res[0][0].top
            res[1].forEach((item,index2) => {
                // 每个项目距离顶部的高度-scroll-view 距离顶部的高度=每个项目距离scroll-view顶部的高度
                if(item.top-scrollMenuTop<=0){
                    index = index2
                }
            });
            // 联动左边项
            this.setData({nowIndex:index})
        })
        
    }
})

效果图