前言

今天寫出了一個(gè)新的小玩意兒，個(gè)人認(rèn)為實(shí)現(xiàn)思路與方法還算值得學(xué)習(xí)，在這里分享給大家！

一、示意圖

二、實(shí)現(xiàn)步驟與思路講解

1.靜態(tài)頁(yè)面的布局

• 頁(yè)面的布局——在實(shí)現(xiàn)具體功能之前，我們就要考慮所要實(shí)現(xiàn)的具體功能是什么，將靜態(tài)頁(yè)面結(jié)構(gòu)搭建完成，頁(yè)面結(jié)構(gòu)的構(gòu)成，決定了后續(xù)功能的實(shí)現(xiàn)難易程度與方便度，這里我們所要實(shí)現(xiàn)的是左右菜單的聯(lián)動(dòng)，這就需要用到滑動(dòng)效果，在uni-app中可利用scroll-view實(shí)現(xiàn)這一效果，相關(guān)屬性如下

2.模擬數(shù)據(jù)格式

數(shù)據(jù)結(jié)構(gòu)—— 沒(méi)有后臺(tái)接口的同學(xué)可以自行模擬數(shù)據(jù) ,在開發(fā)中，自行模擬數(shù)據(jù)格式的能力也至關(guān)重要。這里所需要的數(shù)據(jù)結(jié)構(gòu)應(yīng)為： 頁(yè)面整體的數(shù)據(jù)是一個(gè)數(shù)組，其中左側(cè)菜單應(yīng)為一個(gè)個(gè)的對(duì)象，其中每一個(gè)對(duì)象應(yīng)該有一個(gè)子元素 name屬性名,它的值應(yīng)為標(biāo)題的文，另外還應(yīng)有兩外一個(gè)子元素是一個(gè)數(shù)組，數(shù)組中的內(nèi)容應(yīng)為子菜單對(duì)應(yīng)的數(shù)據(jù)。

3.左側(cè)菜單的點(diǎn)擊效果

實(shí)現(xiàn)思路：

可給左側(cè)菜單一個(gè)點(diǎn)擊事件，在點(diǎn)擊中觸發(fā)scroll-view 的scroll-into-view屬性，所以這里千萬(wàn)不要忘記給子元素添加相應(yīng)的id屬性，在點(diǎn)擊相應(yīng)標(biāo)題時(shí)，即可自動(dòng)切換

相應(yīng)代碼如下：

頁(yè)面屬性的設(shè)置

左側(cè)菜單的點(diǎn)擊事件

// 左側(cè)列表菜單的點(diǎn)擊事件
			changeIndex(index) {
				this.currentIndex = index;
				this.rightScrollinto = 'tab' + index;
				if (this.currentIndex < 6) {
					this.rightScrollinto = "tab0"
				}
			 this.leftScrollinto = 'left' + index;

			},

4.右側(cè)菜單的聯(lián)動(dòng)效果

實(shí)現(xiàn)思路：

可獲得每一個(gè)子列表區(qū)塊的距離頂部的高度，那么這就涉及到要獲取具體的節(jié)點(diǎn)信息，在uni-app中相關(guān)的api可用于獲取某元素的節(jié)點(diǎn)信息，隨之聲明一個(gè)數(shù)組，將這些數(shù)據(jù)存放在一個(gè)數(shù)組中，然后判斷滑動(dòng)的高度（這就需要用到scroll-view的@scroll事件，可獲取用戶滑動(dòng)的距離）是否大于數(shù)組中的數(shù)據(jù)，若大于，則將該區(qū)域的索引傳遞到左側(cè)菜單中，左側(cè)菜單移動(dòng)到對(duì)應(yīng)的索引位置即可。

相關(guān)代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-468305.html

	// 獲取右側(cè)滑動(dòng)區(qū)域每一個(gè)子區(qū)域的高度
			getTop() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.demo3').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("節(jié)點(diǎn)離頁(yè)面頂部的距離為" + data.top);
					if (data) {
						data.map((item, index) => {
							let top = index > 0 ? this.topList[index - 1] : 0;
							top += item.height;
							this.topList.push(top);
						})
					}
					console.log(this.topList);
				}).exec();
			},
			//右側(cè)滑動(dòng)區(qū)域的滑動(dòng)事件
			rightscroll(event) {
				// console.log(event.target.scrollTop)
				let scrollTop = event.target.scrollTop
				let result = this.topList.findIndex((item,index)=>{
				   return 	 scrollTop<=item
				})
				this.currentIndex = result;
				// this.changeIndex();
			}
		},

三、具體實(shí)現(xiàn)代碼

1.頁(yè)面結(jié)構(gòu)

	<!-- 左側(cè)列表欄區(qū)域 s-->
		<view class="uni-padding-wrap uni-common-mt">
			<view class="d-flex">
				<scroll-view scroll-with-animation :scroll-top="scrollTop" 
				scroll-y="true" class="scroll-Y left-scroll"
					:scroll-into-view="rightScrollinto">
					<view @click="changeIndex(index)"  :id="'tab'+index" 
					v-for="(item,index) in listName" :key="item.id"
						:class="currentIndex == index?'active-class':''">
						{{item.name}}
					</view>
				</scroll-view>
				<scroll-view @scroll="rightscroll" scroll-with-animation :style="'height:'+scrollH+'px'"
					:scroll-top="scrollTop" scroll-y="true" class="scroll-Y right-scroll"
					:scroll-into-view="leftScrollinto">
					<view   :id="'left'+bindex" v-for="(bitem,bindex) in listName" :key="bindex" class="d-flex flex-wrap demo3">
						<view  v-for="(childItem, Aindex) in bitem.app_category_items" :key="childItem.id"
							class=" demo2 scroll-view-item uni-bg-red  demo2">
							<view class="img">
								<image :src="childItem.cover" mode="scaleToFill"></image>
							</view>
							<view class="text">
								<text>{{childItem.name}}</text>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>

2.相關(guān)樣式

.left-scroll {
		width: 30%;
		background: #f4f4f4;
		text-align: center;
	}



	.left-scroll view {
		height: 120rpx;
		line-height: 120rpx;
	}

	.right-scroll {
		width: 70%;
	}

	.right-scroll .demo2 {
		width: 33%;
		text-align:center;
		margin-top:0;
	}

	

	image {
		width: 120rpx;
		height: 120rpx;
	}

	.active-class {
		color: orange;
		background: white;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

3.業(yè)務(wù)邏輯部分

<script>
	import {
		getCate
	} from '../../api/cate.js';
	export default {
		data() {
			return {
				currentIndex: 0,
				listName: [],
				scrollH: 0,
				// 表明左右兩側(cè)滑動(dòng)的標(biāo)志scroll-into-view
				rightScrollinto: '',
				leftScrollinto: '',
				// 用一個(gè)數(shù)組承載每一個(gè)子區(qū)塊的距離頂部的高度
				topList: [],

			}
		},
		mounted() {
			this.getCate();
			// 使用定時(shí)器獲取區(qū)塊節(jié)點(diǎn)信息
			setTimeout(() => {
				this.getTop();
			}, 500)
		},
		onLoad() {
			// 異步獲取系統(tǒng)信息，包括屏幕高度等
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// #ifdef MP
					this.scrollH = res.windowHeight - uni.upx2px(88)
					// #endif
				}
			});

		},
		methods: {
			// 調(diào)用獲取分類頁(yè)數(shù)據(jù)的方法
			getCate() {
				getCate().then((response) => {
					console.log(response)
					this.listName = response.data
				})
			},
			// 左側(cè)列表菜單的點(diǎn)擊事件
			changeIndex(index) {
				this.currentIndex = index;
				this.rightScrollinto = 'tab' + index;
				if (this.currentIndex < 6) {
					this.rightScrollinto = "tab0"
				}
			 this.leftScrollinto = 'left' + index;

			},
			// 獲取右側(cè)滑動(dòng)區(qū)域每一個(gè)子區(qū)域的高度
			getTop() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.demo3').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("節(jié)點(diǎn)離頁(yè)面頂部的距離為" + data.top);
					if (data) {
						data.map((item, index) => {
							let top = index > 0 ? this.topList[index - 1] : 0;
							top += item.height;
							this.topList.push(top);
						})
					}
					console.log(this.topList);
				}).exec();
			},
			//右側(cè)滑動(dòng)區(qū)域的滑動(dòng)事件
			rightscroll(event) {
				// console.log(event.target.scrollTop)
				let scrollTop = event.target.scrollTop
				let result = this.topList.findIndex((item,index)=>{
				   return 	 scrollTop<=item
				})
				this.currentIndex = result;
				// this.changeIndex();
			}
		},

	}
</script>

到了這里，關(guān)于uni-app —— 小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！