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>