云迈博客

您现在的位置是:首页 > 前端技术 > uni-app > 正文

uni-app

uni-app节点控制

俗人将庸2021-03-25uni-app378
uni.createSelectorQuery()制作滚动切换效果

uni.createSelectorQuery() 制作滚动切换效果

页面效果如下

<template>
    <view class="page_box">
        <view class="p_l">
            <view class="l_li" v-for="(li,i) in 14" :key="i"
            @click="go_click(i)" :class="act_i==i?'act':''">测试{{i}}</view>
        </view>
        <view class="p_r">
            <scroll-view class="page_r" :scroll-y="true" :scroll-top="scrollTop"
            :scroll-with-animation="true" @scroll="scrollEvent">
                <view class="r_li" v-for="(li,i) in 14" :key="i">测试内容{{i}}</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    let t;
    export default {
        data() {
            return {
                nodeHeight:[],
                windowTop:0,
                windowHeight:0,//屏幕高度
                scrollTop:0,
                scrollStatus:true,
                act_i:0,
                scrollVal:0,
            }
        },
        onLoad(){
            t=this;
        },
        onReady(){
            this.get_els();//获取数据列表后计算节点数据
        },
        methods: {
            get_els(){
                uni.getSystemInfo({
                    success: (res) => {
                        // console.log(res)
                        this.windowHeight = res.windowHeight;
                        this.windowTop = res.windowTop;
                    }
                });
                this.nodeHeight = [];
                let theNode = uni.createSelectorQuery().in(this).selectAll(".r_li");
                // console.log(theNode)
                theNode.boundingClientRect((data) => {
                    // console.log(data)
                    data.forEach((item, index) => {
                        this.nodeHeight.push({
                            top: item.top + this.windowTop,
                            height:item.height,
                            index: index
                        })
                    })
                }).exec()
            },
            go_click(index) {
                // 点击侧边栏按钮切换
                // 300毫秒才能执行下次点击
                if (this.scrollStatus) {
                    this.scrollStatus = false;
                    this.act_i = index;
                    let theNode = uni.createSelectorQuery().in(this).selectAll(".r_li");
                    theNode.boundingClientRect((data) => {
                        // 计算每个单元的高度属性
                        /* 获取当前第index的categoryList的top,滑动后值scrollVal + categoryList的top */
                        // this.scrollTop = this.scrollVal + data[index].top + this.windowTop - 70;
                        this.scrollTop = this.scrollVal +  data[index].top;
                        // console.log(this.scrollTop,index)
                        setTimeout(() => {
                            // 200毫秒才能执行下次点击
                            this.scrollStatus = true;
                        }, 200)
                    }).exec()
                }
            },
            scrollEvent(e) {
                // 页面滚动监听
                // console.log(this.scrollVal,e.detail.scrollTop)
                if (this.scrollVal < e.detail.scrollTop) {
                    // 向上滚动
                    this.nodeHeight.forEach(item => {
                        let num = this.scrollVal - item.top;
                        console.log(this.scrollVal,item.top,item.index,item.height)
                        if (num > 0 && num < item.height) {
                            this.act_i = item.index;
                            // console.log(this.scrollVal - item.top,item.index,item.height)
                        }
                    })
                } else {
                    // 向下滚动
                    this.nodeHeight.forEach(item => {
                        let num = this.scrollVal - item.top;
                        if (num > 0 && num < this.windowHeight) {
                            this.act_i = item.index;
                        }
                    })
                }
                this.scrollVal = e.detail.scrollTop;
            },
        },
    }
</script>
<style lang="scss" scoped>
    .page_box{
        position: fixed;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        .p_l{
            width: 250rpx;
            view{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 80rpx;
                border-bottom: 1px solid #eee;
                &.act{
                    color: #f00;
                }
            }
        }
        .p_r{
            width: 500rpx;
            view{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 160rpx;
                background: #ccc;
                &:nth-child(2n+1){
                    background: #2B85E4;
                    color: #fff;
                    height: 300rpx;
                }
            }
        }
    }
    .page_r{
        height: 100%;
    }
</style>

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~