微信小程序 简单的实现左右内容联动
请求到的数据 封装请求
实现方法
scroll-view的属性scroll-into-view可以实现类似于瞄点链接的效果，在绑定的属性修改时会触发，滑动到对应id的地方
注意： id不能以数字开头
设置两个变量tabIndex、nowIndex保存状态，如果只设置一个更新变量时会触发瞄点更新
通过tabIndex更新瞄点
通过nowIndex设置当前的分类(用来高亮当前的分类)
在按下分类时同时更新tabIndex、nowIndex
在滑动时通过判断没一个id的内容距离scroll-view顶部的高度
如果等于或小于0表示该内容滑到了，只需要 更新nowIndex，如果更新`tabIndex了的话，会触发滑动文章来源：https://www.toymoban.com/news/detail-773682.html
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})
})
}
})
效果图
文章来源地址https://www.toymoban.com/news/detail-773682.html
到了这里，关于微信小程序 简单的实现左右内容联动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
