共计 4365 个字符，预计需要花费 11 分钟才能阅读完成。
需求
首页多个分类栏目，分两排展示，菜单页实现一排首页分类栏目的展示
要求：首页的多个分类栏目无论点击哪一个，到菜单页一排显示的时候该栏目定位到指定位置
首页代码
为了项目结果清晰，我将首页的分类栏目写成组件并引入到首页，首页会通过 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>
正文完
