需求首页多个分类栏目，分两排展示，菜单页实现一排首页分类栏目的展示要求：首页的多个分类栏目无论点击哪一个，到菜单页一排显示的时候该栏目定位到指定位置
首页代码为了项目结果清晰，我将首页的分类栏目写成组件并引入到首页，首页会通过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>