uni-app里面实现分类栏目定位和滚动

需求

首页多个分类栏目，分两排展示，菜单页实现一排首页分类栏目的展示
要求：首页的多个分类栏目无论点击哪一个，到菜单页一排显示的时候该栏目定位到指定位置

首页代码

为了项目结果清晰，我将首页的分类栏目写成组件并引入到首页，首页会通过props传给组件datas

<template>
    <view class="category" >
    //X是当前元素的标志，在菜单页我是需要拿到这个X，并与菜单页元素的X比对，如果比对一直，就可以滚动到指定位置
        <view v-for="(o,x) in datas" class="itemcategory" @tap="tosdCategoryList(o.id,o.contentName,x)" :key="x" :id="'ele' + x">
            <image :src="o.assemblyImg" class="assemblyimg"></image>
            <text class="contentname" :style="{color:o.wordColor?o.wordColor:'contentname'}" >{{o.contentName}}</text>    
        </view>
        
    </view>
</template>

<script>
    export default{
        name:"sdCategory",
        props: {
            datas: {
                type: Array
            },
        },
        data() {
            return {
                info: [],
                assemblyContentId: "",
            }
        },
        computed: {
        },
        onLoad() {
        },
        onShow() {
        },
        methods:{
        
            tosdCategoryList(assemblyContentId ,goodsName,x){
                 let categoryList1=(JSON.stringify(this.datas))
                 
                 uni.navigateTo({
                    url:"/pages/sdCategoryGoodsList/sdCategoryGoodsList?assemblyContentId="+assemblyContentId+"&goodsName="+goodsName+"&categoryList="+categoryList1+"&x="+x,
                 })

            }
        }
    }
</script>

菜单页代码

在这里面我是采坑了的，vue组件或者页面都是有生命周期的，如果需要元素加载完了再展示或者匹配，在vue里面请使用mounted钩子，在uni-app里面使用onReady

<scroll-view class="first-scroll" scroll-with-animation scroll-x @scroll="scrollMove"  :scroll-left="scrollLeft" :scroll-into-view="intoindex">
        <view :class="item.id==assemblyContentId?'first-box1':'first-box'" v-for="(item,x) in info" :key="x" @tap="gotoGetCategoryList(item.id,x)" :id="'ele' + x">
            <view class="info">
                    <view :class="item.id==assemblyContentId?'name1':'name'">{{item.contentName}}</view>
                    </view>
            </view>
</scroll-view>


<script>
    export default {
        data() {
            return {
                isExtension:'',
                token: '',
                info: [],
                smShopInfo: {},
                assemblyContentId: "",
                x:0,
                goodsInfoList: [],
                isShow:false,
                statusBar:'',
                statusTop:'',
                isTop:false,
                currentSwiper: 0,
                tabbarIndex: 0,
                scrollLeft: '',
                pageHeight: 200,
                moveParams: {
                    scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
                    subLeft: '', //点击元素距离屏幕左边的距离
                    subHalfWidth: '', //点击元素的宽度一半
                    screenHalfWidth: '' //屏幕宽度的一半
                },
            }
        },
        onReady() {
            // 获取屏幕宽度，为了让横排的栏目每次点击的时候固定到指定位置
            this.getScreenWidth();        this.getCategoryList(this.assemblyContentId,this.x)
        },
       //之前组件传过来的东西
        onLoad(option, res) {
            this.assemblyContentId = option.assemblyContentId
            this.info = JSON.parse(option.categoryList)
            this.x=Number(option.x)
        },
        methods: {
            //获取屏幕宽度
            getScreenWidth() {
                var that = this;
                uni.getSystemInfo({
                    success(res) {
                        console.log(res);
                        let moveParams = that.moveParams;
                        moveParams.screenHalfWidth = res.screenWidth / 2;
                        that.pageHeight = res.windowHeight - 50;
                    }
                });
            },
            getRect(ele) {
                //获取点击元素的信息,ele为传入的id
                console.log(ele);
                var that = this;
                const query = uni.createSelectorQuery().in(that);
                console.log(query)
                    query.select(ele).boundingClientRect((rect)=> {
        let moveParams = that.moveParams;
        console.log(rect) //为当前需要的元素信息
        console.log(rect.left)
        console.log(rect.width)
        moveParams.subLeft =rect.left;
        moveParams.subHalfWidth =rect.width / 2;
    that.moveTo();                        
                }).exec();
            },
            //scroll事件集合：
            scrollMove(e) {
                let moveParams = this.moveParams;
                moveParams.scrollLeft = e.detail.scrollLeft;
                this.moveParams = moveParams;
            },
            //移动到指定位置
            moveTo() {
                let subLeft = this.moveParams.subLeft;
                let screenHalfWidth = this.moveParams.screenHalfWidth;
                let subHalfWidth = this.moveParams.subHalfWidth;
                let scrollLeft = this.moveParams.scrollLeft;
                let distance = subLeft - screenHalfWidth + subHalfWidth;
                scrollLeft = scrollLeft + distance;
                this.scrollLeft = scrollLeft;
            },
            //获取列表
            getCategoryList(id,x) {
                console.log(id);
                console.log(x);
                this.tabbarIndex = x;
                let ele = 'ele' + x;
                console.log(ele);
                this.getRect('#' + ele);
                this.currentSwiper = x;
                let params = {
                    shopId: uni.getStorageSync('smShopInfo').id,
                    assemblyContentId: this.assemblyContentId
                }
                this.$http.get(this.$api.categoryList, {
                    data: params
                }).then(res => {
                    if (res.data.code == 200) {
                        if (!!res.data.data) {
                            this.goodsInfoList = res.data.data.list
                            console.log(res.data.data.list);
                             this.isShow = false    
                        }else{
                            this.goodsInfoList=[];
                            this.isShow = true
                        }
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                })
            },
           //点击后渲染列表 点击的横排也是可以滚动到指定位置
            gotoGetCategoryList(id,x) {
                console.log(id);
                console.log(x);
                this.tabbarIndex = x;
                let ele = 'ele' + x;
                console.log(ele);
                this.getRect('#' + ele);
                // this.list = this.orderList[tbIndex];
                this.currentSwiper = x;
                let params = {
                    shopId: uni.getStorageSync('smShopInfo').id,
                    assemblyContentId: id
                }
                this.$http.get(this.$api.categoryList, {
                    data: params
                }).then(res => {
                    if (res.data.code == 200) {
                        uni.showLoading({
                            title: '加载中',
                            duration: 500,
                            icon: 'none'
                        });
                        if (!!res.data.data) {
                            // console.log(res.data.data);
                            this.goodsInfoList = res.data.data.list
                            console.log(res.data.data.list);
                             this.isShow = false    
                        }else{
                            this.goodsInfoList=[];
                            this.isShow = true
                        }
                        this.assemblyContentId = id
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                })
            },
            
            
        }
    }
</script>