两种方法--
第一种:元素距离左边的真实距离 = 元素距离左边元素的相邻距离*元素下标+元素第一个元素距离左边距离。
第二种:直接获取原生的DOM元素。这个小程序是不支持的,H5支持。
<template>
<view>
<view class="tab">
<scroll-view :scroll-x="true" id="menu-list-scroll" :scroll-into-view="scrollId" :scroll-left="scrollLeft"
class="scroll" :scroll-with-animation="true">
<view class="tab-inner">
<view class="title" :id="'id'+item.id" v-for="(item, index) in tabs" :key="index"
:class="{'current': item.id === indexSwitchMeun }" @click="swtichMeum($event,item.id)">
{{item.name}}
</view>
</view>
</scroll-view>
<view class="menu-icon" @click="menuAll">
<image src="@/static/images/ic_information_more.png" mode=""></image>
</view>
</view>
<view class="content">
<view class="list" @click="toDetail()">
<view class="left">
<view class="title">兴福鼎白茶,迎幸福小康丨第九届福鼎白茶开茶节</view>
<view class="source">一点资讯</view>
</view>
<view class="right">
<image class="img" src="@/static/images/goods/2.jpg" mode=""></image>
</view>
</view>
<view class="list">
<view class="left">
<view class="title">兴福鼎白茶,迎幸福小康丨第九届福鼎白茶开茶节</view>
<view class="source">一点资讯</view>
</view>
</view>
<view class="list">
<view class="left">
<view class="title">兴福鼎白茶,迎幸福小康丨第九届福鼎白茶开茶节</view>
<view class="source">一点资讯</view>
</view>
<view class="right">
<image class="img" src="@/static/images/goods/2.jpg" mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollLeft: "",
scrollId: "",
scrollViewWidth: "",
indexSwitchMeun: 0,
switchScrollName: "",
tabs: [{
id: 0,
name: "全部"
}, {
id: 2,
name: "产业"
}, {
id: 3,
name: "百科"
}, {
id: 4,
name: "喝茶"
}, {
id: 5,
name: "品牌"
}, {
id: 6,
name: "功效"
}, {
id: 7,
name: "频道名称"
}, {
id: 8,
name: "产业"
}]
}
},
onShow() {
console.log(this.$route.query.id * 1)
this.indexSwitchMeun = this.$route.query.id * 1 || 0;
this.clickSwitch(this.$route.query.id * 1, 1)
},
mounted() {
this.getWidth()
},
methods: {
swtichMeum(e, index) {
// console.log(e);
let offsetLeft = e.currentTarget.offsetLeft;
this.indexSwitchMeun = index;
let id = e.currentTarget.id;
this.scrollLeft = (offsetLeft - this.scrollViewWidth / 2);
},
getWidth() {
var that = this
uni.createSelectorQuery().select('#menu-list-scroll').boundingClientRect((rect) => {
that.scrollViewWidth = Math.round(rect.width);
}).exec()
},
clickSwitch(id, index) {
this.$nextTick(() => {
console.log(document.getElementById(`id${id}`))
let offsetLeft = document.getElementById(`id${id}`).offsetLeft;
this.scrollLeft = (offsetLeft - this.scrollViewWidth / 2);
this.indexSwitchMeun = id
})
},
toDetail(item) {
console.log(item)
uni.navigateTo({
url: `/pages/home/taeInfoDetail`
})
},
menuAll() {
uni.navigateTo({
url: `/pages/home/tabMenuAll`
})
}
}
}
</script>
<style>
page {
background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
.tab {
width: 100%;
height: 88rpx;
background: #FFFFFF;
position: relative;
.scroll {
margin-left: 48rpx;
width: calc(100% - 136rpx);
}
.tab-inner {
width: 84%;
height: 88rpx;
display: flex;
align-items: center;
.title {
flex-shrink: 0;
margin-right: 54rpx;
font-size: 28rpx;
color: #777E84;
font-family: PingFang SC;
}
.current {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #007D5F;
}
}
.menu-icon {
width: 88rpx;
height: 88rpx;
position: absolute;
top: 0;
right: 0;
background-color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
}
}
}
.content {
background: #FFFFFF;
margin-top: 20rpx;
padding: 0 30rpx;
.list {
width: 100%;
height: 228rpx;
display: flex;
justify-content: space-between;
padding: 32rpx 0;
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #292C40;
}
.source {
font-size: 24rpx;
font-family: PingFang SC;
color: #9DA5B2;
}
}
.right {
width: 244rpx;
height: 164rpx;
border-radius: 8px;
.img {
width: 244rpx;
height: 164rpx;
}
}
}
}
</style>
另一个全部菜单页面
<template>
<view class="wrap">
<view class="title">
<view class="left">
<text class="switch">切换频道</text>
<text class="go">点击进入频道</text>
</view>
<image class="img" src="@/static/images/ic_tanchuang_shut down.png" mode="" @click="goback"></image>
</view>
<view class="content">
<view class="each" v-for="(item, index) in tabs" :key="index" @click="clickTab(item.id)">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [{
id: 0,
name: "全部"
}, {
id: 2,
name: "产业"
}, {
id: 3,
name: "百科"
}, {
id: 4,
name: "喝茶"
}, {
id: 5,
name: "品牌"
}, {
id: 6,
name: "功效"
}, {
id: 7,
name: "频道名称"
}, {
id: 8,
name: "产业"
}]
}
},
methods: {
clickTab(id) {
uni.navigateTo({
url: `/pages/home/taeInfo?id=${id}`
})
},
goback() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 30rpx;
.title {
display: flex;
justify-content: space-between;
.left {
margin-top: 18rpx;
.switch {
font-size: 34rpx;
font-family: PingFang SC;
color: #292C40;
}
.go {
font-size: 22rpx;
font-family: PingFang SC;
color: #9DA5B2;
margin-left: 16rpx;
}
}
.img {
width: 48rpx;
height: 48rpx;
margin-bottom: 18rpx;
}
}
.content {
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
.each {
width: 156rpx;
height: 80rpx;
line-height: 80rpx;
background: #F1F1F1;
border-radius: 4rpx;
text-align: center;
margin: 0 22rpx 22rpx 0;
}
.each:nth-child(4n) {
margin-right: 0;
}
}
}
</style>
效果gif