uni-app制作小程序实现左右菜单联动效果

目录
  • 前言
  • 一、示意图
  • 二、实现步骤与思路讲解
    • 1.静态页面的布局
    • 2.模拟数据格式
    • 3.左侧菜单的点击效果
    • 4.右侧菜单的联动效果
  • 三、具体实现代码
    • 1.页面结构
    • 2.相关样式
    • 3.业务逻辑部分

前言

今天写出了一个新的小玩意儿,个人认为实现思路与方法还算值得学习,在这里分享给大家!

一、示意图

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

二、实现步骤与思路讲解

1.静态页面的布局

页面的布局——在实现具体功能之前,我们就要考虑所要实现的具体功能是什么,将静态页面结构搭建完成,页面结构的构成,决定了后续功能的实现难易程度与方便度,这里我们所要实现的是左右菜单的联动,这就需要用到滑动效果,在uni-app中可利用scroll-view实现这一效果,相关属性如下

属性 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
scroll-into-view String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
@scroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

2.模拟数据格式

数据结构—— 没有后台接口的同学可以自行模拟数据 ,在开发中,自行模拟数据格式的能力也至关重要。这里所需要的数据结构应为: 页面整体的数据是一个数组,其中左侧菜单应为一个个的对象,其中每一个对象应该有一个子元素 name属性名,它的值应为标题的文,另外还应有两外一个子元素是一个数组,数组中的内容应为子菜单对应的数据。

3.左侧菜单的点击效果

实现思路:

可给左侧菜单一个点击事件,在点击中触发scroll-view 的scroll-into-view属性,所以这里千万不要忘记给子元素添加相应的id属性,在点击相应标题时,即可自动切换

相应代码如下:

页面属性的设置

左侧菜单的点击事件

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

			},

4.右侧菜单的联动效果

实现思路:

可获得每一个子列表区块的距离顶部的高度,那么这就涉及到要获取具体的节点信息,在uni-app中相关的api可用于获取某元素的节点信息,随之声明一个数组,将这些数据存放在一个数组中,然后判断滑动的高度(这就需要用到scroll-view的@scroll事件,可获取用户滑动的距离)是否大于数组中的数据,若大于,则将该区域的索引传递到左侧菜单中,左侧菜单移动到对应的索引位置即可。

相关代码:

	// 获取右侧滑动区域每一个子区域的高度
			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();
			}
		},

三、具体实现代码

1.页面结构

	<!-- 左侧列表栏区域 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.相关样式

.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.业务逻辑部分

 <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>

到此这篇关于uni-app制作小程序实现左右菜单联动效果的文章就介绍到这了,更多相关uni-app左右菜单联动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-12

uni-app微信小程序登录授权的实现

微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去 <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx&q

uni-app使用微信小程序云函数的步骤示例

创建云函数目录 首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions.然后先随便在里面放一些文件,这里以new_file.css为例.(放文件的原因是:确保编译成小程序后cloudfunctions文件夹存在.如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的.) 修改manifest.json 在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下 "mp-weixin" : { /* 小

vue中uni-app 实现小程序登录注册功能

思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

uni-app 开发微信小程序定位功能

目录 一.注册账号 二.创建应用和Key 1.进入控制台 2.创建应用 3.创建Key 三.登录微信公众平台后台 四.下载微信小程序JavaScriptSDK 五.代码实现 六.一般获取经纬度地址 七.相对精确的获取经纬度地址 1.获取位置监听的权限 2.开启位置监听 3.监听实时地理位置变化 使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度. 已经会定位的直接跳七.相对精确的获取经纬度地址 一.注册账号 把信息都输入就好了 腾讯位置服务 - 立

微信小程序自定义tabBar在uni-app的适配详解

引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

微信小程序转化为uni-app项目的方法示例

前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及极其的符合我的需求.那么问题来了我该如何将微信小程序转为为uni-app项目呢?搜索了下网上的相关解决方案还真有个将微信小程序转化为uni-app的项目,该项目名称叫做[miniprogram-to-uniapp],接下来就看看如何实操吧! miniprogram-to-uniapp项目介绍:

使用uni-app开发微信小程序的实现

前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

uni-app之APP和小程序微信授权方法

uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

微信小程序(微信应用号)开发工具0.9版安装详细教程

微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

PHP:微信小程序 微信支付服务端集成实例详解及源码下载

微信小程序 微信支付服务端集 理论上集成微信支付的全部工作可以在小程序端完成,因为小程序js有访问网络的能力,但是为了安全,不暴露敏感key,而且可以使用官方提供的现成php demo更省力,于是在服务端完成签名与发起请求,小程序端只做一个wx.requestPayment(OBJECT)接口的对接. 整体集成过程与JSAPI.APP类似,先统一下单,然后拿返回的结果来请求支付. 一共三步: 1.小程序端通过wx.login的返回的code换取openid 2.服务端向微信统一下单 3.小程序端

微信小程序用户授权,以及判断登录是否过期的方法

初始界面: 判断用户是否过期(如果未过期则重新登录): 获取用户信息: 获取用户的信息并在前台显示: 主要实现两个功能: ①判断登录是否过期,如果过期则就重新登录,如果没过期就提示未过期 ②获取用户的信息,并在前台显示 index.wxml <button bindtap="login">登录</button> <button bindtap="checksession">登录是否过期</button> <but

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo

微信小程序中post方法与get方法的封装

微信小程序开发post方法与get方法的封装 第一步:在utils文件夹下创建httpUtil.js文件 第二步:创建函数httpPost方法代码如下: function Post(url, data, cb, isShow, showNetError, that, showLoading) { if (showLoading == true || showLoading == undefined){ wx.showNavigationBarLoading(); wx.showLoading({

微信小程序 wx.request方法的异步封装实例详解

wx-promise-request 是对微信小程序 wx.request 方法的异步封装. 解决问题 支持 Promise (使用 es6-promise 库). 管理请求队列,解决 request 最大并发数超过 10 会报错的问题. 下载 npm install wx-promise-request 然后拷贝 dist/index.js 文件到你的小程序项目中. 使用 import {request} from './wx-promise-request'; request({ url:

微信小程序 MD5的方法详解及实例代码

微信小程序 MD5的方法详解 生成的文件可以放在  utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt

微信小程序微信支付接入开发实例详解

本文主要讲述微信小程序接入微信支付开发过程中遇到的坑,分为两大块,小程序端和后台接口封装.本文主要内容如下: 一.后台接口封装: 二.小程序端整合: 三.总结 一.后台接口封装 本文介绍基于ThinkPHP5进行接口封装,具体步骤如下: 1.微信支付官方文档提供了PHP脚本微信支付的样例,下载下来: 2.样例已经封装好了每个类,我们只需要加上命名空间即可,在TP5的extend目录下新建一个目录wxpay,把样例中的类复制到该目录下,然后加上命名空间即可: 样例改造结果 其中最主要的一个类即Wx

微信小程序 setData使用方法及常用错误解决办法

微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元