uniapp组件scroll-view实现双联动。(demo)
<template> <view class="use_com"> <text>uniapp ---- 组件</text> <view>1、 scroll-view</view> <scroll-view class="com_scroll_view" scroll-x="true"> <view v-for="(item,index) in get_scroll_view_list" :key="index" class="com_content"> <view> <image :src="item.mainPic" mode="" class="com_image"></image> <view class="com_text1">{{item.skuName}}</view> <view class="com_text2">{{item.priceValue}}</view> <view class="com_text3">{{item.originPrice}}</view> </view> <view> <view class="com_text4"> {{item.companyName}} </view> </view> </view> </scroll-view> <view>******************************</view> <view>1、 scroll-view 双联动案例 (类似于锚点,原理也还是锚点)利用 scroll-into-view</view> <!-- uniapp获取节点信息,根据节点信息调整写需求。 --> <view> <view class="left"> <!-- :class="index == click_index ? 'life_title':''" :class="{life_title:index == click_index}" --> <view v-for="(item,index) in left_list" :key="index" @click="change_click_index(index)" :class="{life_title:index == click_index}" > {{item.title}} </view> </view> <view class="right"> <scroll-view scroll-y="true" class="scroll_y" :scroll-into-view="scroll_into_view" scroll-with-animation="true" @scroll="scroll_detail" @scrolltolower="scroll_bottom" > <view v-for="(item,index) in left_list" :key="index"> <view style="background: red;" :id="'id'+index" class="selectAll">{{item.title}}</view> <view v-for="(ite,ind) in item.list" :key="ind">{{ite}}</view> </view> </scroll-view> </view> </view> </view> </template> <script> export default { data() { return { get_scroll_view_list:[], left_list:[ { title:"手机",list:["iphone12","华为p40","vivo90","oppoy77","三星手机"] }, { title:"电脑",list:["Mac pro","联想yoga910","华硕911","联想811","三星电脑"] }, { title:"水果",list:["香蕉","苹果","西瓜","榴莲","山竹"] }, { title:"饮料",list:["coke可乐","脉动","红牛","冰糖雪梨","果汁"] }, ], //切换class click_index:0, //id动态切换 scroll_into_view:"", //节点top值 top_list:[] } }, onLoad: function(){ this.get_scroll_view(); }, methods: { async get_scroll_view(){ let res = await this.$uni_request({ body:{ defaultProvince: "370000", firstCateCode: "", oldCustFlag: "2", requiredAmount: "3" }, header:{ bizCode: "prom013" } }); this.get_scroll_view_list = res.data.body.result; }, //切换 change_click_index(index){ this.click_index = index; //利用uniapp组件的配置信息。 this.scroll_into_view = 'id'+index; //解决最后一个 ***来回*** 问题 (由于点击左侧导航,右侧锚点位置信息变化,此时滚动事件也随之滚动。) uni.setStorageSync("resolve","last"); setTimeout(()=>{ uni.clearStorageSync("resolve") },400); }, //滚动过程 scroll_detail(options){ //options 为滚动信息。 options.detail.scrollTop 值为相对于scroll-view。 if(!uni.getStorageSync("resolve")){ this.get_node_details(options); }; }, //获取节点信息 get_node_details(options){ const query = uni.createSelectorQuery().in(this); //获得实力 //获取多个节点方式 query.selectAll(".selectAll").boundingClientRect(data=>{ console.log(data); //得到class类名为 selectAll的数组集合 this.top_list = data.map(item=>{ return Math.ceil(item.top); }); this.async_detail_msg(options); }).exec(); }, async_detail_msg(options){ //options 为滚动信息。 options.detail.scrollTop 值为相对于scroll-view。 let top_page = options.detail.scrollTop + this.top_list[0]; for(let i = 0;i < this.top_list.length; i++){ let node1 = this.top_list[i]; let node2 = this.top_list[i+1]; if(node2 && top_page >= node1 && top_page < node2){ this.click_index = i; break; }else if(node2 && top_page === node2){ this.click_index = i + 1; break; } } }, //滚动到底部 scroll_bottom(options){ setTimeout(()=>{ this.click_index = 3; },100) }, } } </script> <style lang="scss" scoped> .use_com{ margin-bottom: 100px; } .com_scroll_view{ white-space:nowrap; .com_content{ display: inline-block; width: 200px; padding: 0 10px; .com_image{ width: 100%; } .com_text1,.com_text2,.com_text3,.com_text4{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .left,.right{ display: inline-block; border: 1px solid #4CD964; vertical-align: top; height: 160px; } .right{ display: inline-block; border: 1px solid #4CD964; } .scroll_y{ height: 100%; } .life_title{ background: #DD524D; } </style>