uni-app —— a small program to realize the linkage between the left and right menus

Article Directory

• foreword
• 1. Schematic diagram
• 2. Use steps
  • 1. Layout of static pages
  • 2. Analog data format
  • 3. The click effect of the left menu
  • 4. The linkage effect of the right menu
• Three, the specific implementation code
  • 1. Page structure
  • 2. Related styles
  • 3. Business logic part

---

foreword

I wrote a new gadget today. I personally think that the implementation ideas and methods are worth learning, and I will share it with you here!

---

1. Schematic diagram

2. Implementation steps and ideas

1. Layout of static pages

• Page layout——Before implementing specific functions, we have to consider what specific functions we want to achieve. After building the static page structure, the composition of the page structure determines the difficulty and convenience of subsequent functions. Here we What we want to achieve is the linkage between the left and right menus, which requires the use of sliding effects. In uni-app, scroll-view can be used to achieve this effect. The related attributes are as follows

Attributes	type	Defaults	illustrate
scroll-x	Boolean	false	Allow horizontal scrolling
scroll-y	Boolean	false	Allow vertical scrolling
scroll-into-view	String		The value should be a child element id (id cannot start with a number). Set which direction is scrollable, in which direction to scroll to the element
@scroll	EventHandle		Triggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

2. Analog data format

Data structure - Students who do not have a background interface can simulate data by themselves. In development, the ability to simulate data formats by themselves is also very important. The data structure required here should be: The overall data of the page is an array, and the left menu should be objects one by one, and each object should have a sub-element name attribute name, and its value should be the text of the title. In addition, there should be another sub-element that is an array, and the content in the array should be the data corresponding to the sub-menu.

3. The click effect of the left menu

Implementation ideas:

You can give a click event to the left menu, and trigger the scroll-into-view attribute of scroll-view during the click, so don't forget to add the corresponding id attribute to the child element here, and it will automatically switch when you click on the corresponding title

The corresponding code is as follows:

Setting of page properties

Click event of the left menu

// 左侧列表菜单的点击事件
			changeIndex(index) {
				this.currentIndex = index;
				this.rightScrollinto = 'tab' + index;
				if (this.currentIndex < 6) {
					this.rightScrollinto = "tab0"
				}
			 this.leftScrollinto = 'left' + index;

			},

4. The linkage effect of the right menu

Implementation ideas:

The height from the top of each sub-list block can be obtained, so this involves obtaining specific node information . The related api in uni-app can be used to obtain the node information of an element, and then declare an array. These data are stored in an array, and then judge whether the height of the slide (this requires the use of the @scroll event of scroll-view to obtain the distance the user slides) is greater than the data in the array, if greater, then the index of the area Pass it to the left menu, and the left menu can be moved to the corresponding index position.

Relevant code:

	// 获取右侧滑动区域每一个子区域的高度
			getTop() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.demo3').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("节点离页面顶部的距离为" + 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();
			},
			//右侧滑动区域的滑动事件
			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();
			}
		},

Three, the specific implementation code

1. Page structure

	<!-- 左侧列表栏区域 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. Related styles

.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. Business logic part

<script>
	import {
		getCate
	} from '../../api/cate.js';
	export default {
		data() {
			return {
				currentIndex: 0,
				listName: [],
				scrollH: 0,
				// 表明左右两侧滑动的标志scroll-into-view
				rightScrollinto: '',
				leftScrollinto: '',
				// 用一个数组承载每一个子区块的距离顶部的高度
				topList: [],

			}
		},
		mounted() {
			this.getCate();
			// 使用定时器获取区块节点信息
			setTimeout(() => {
				this.getTop();
			}, 500)
		},
		onLoad() {
			// 异步获取系统信息，包括屏幕高度等
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// #ifdef MP
					this.scrollH = res.windowHeight - uni.upx2px(88)
					// #endif
				}
			});

		},
		methods: {
			// 调用获取分类页数据的方法
			getCate() {
				getCate().then((response) => {
					console.log(response)
					this.listName = response.data
				})
			},
			// 左侧列表菜单的点击事件
			changeIndex(index) {
				this.currentIndex = index;
				this.rightScrollinto = 'tab' + index;
				if (this.currentIndex < 6) {
					this.rightScrollinto = "tab0"
				}
			 this.leftScrollinto = 'left' + index;

			},
			// 获取右侧滑动区域每一个子区域的高度
			getTop() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.demo3').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("节点离页面顶部的距离为" + 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();
			},
			//右侧滑动区域的滑动事件
			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>