uniapp —— 实现左右联动商品分类页面

news2024/11/19 19:21:06

uniapp —— 实现左右联动商品分类页面

零、前因

我们在日常的开发种，这种页面在项目当中经常会用得到，所以本篇文章会比较注重描述其思路，顺带附上其代码，以便以后在任何代码环境下都能使用上，先介绍一下实现思路：

  1. 点击左侧类别，右侧会跳转到对应的分类；
  2. 右侧滚动到顶部区域，左侧自动高亮对应的类别。

要求就这么多，可以先看下效果如何：
效果

一、搭建结构

重点：使用uniapp的scroll-view组件，如果是小程序原生开发也是这个组件；其次如果是html开发，就自己实现一个溢出滚动。

废话不多说，上代码：

<template>
	<view class="u-wrap">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
			 :scroll-into-view="itemId">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
				 @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
						<view class="item-title">
							<text>{{item.name}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="featureC(item1.cat, item1.name)">
								<image v-if="item1.icon != ''" class="item-menu-image" :src="item1.icon" mode=""></image>
								<view v-else class="item-menu-image row-c" style="background-color: #F4F6F8;"><text style="font-size: 20rpx;color: #d0d0d0;">加载失败</text></view>
								<view class="item-menu-name">{{item1.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

JavaScript业务逻辑代码：

data() {
	return {
		scrollTop: 0, //tab标题的滚动条位置
		oldScrollTop: 0, // tab标题的滚动条旧位置
		current: 0, // 预设当前项的值
		menuHeight: 0, // 左边菜单的高度
		menuItemHeight: 0, // 左边菜单item的高度
		itemId: '', // 栏目右边scroll-view用于滚动的id
		tabbar: JSON.parse(uni.getStorageSync('categroy')), // 渲染的数据，放在最后供你们测试
		arr: [], // 储存距离顶部高度的数组
		scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
		timer: null // 定时器
	}
}

CSS代码：

.u-wrap {
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.u-search-box {
	padding: 18rpx 30rpx;
}

.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.u-tab-view {
	width: 200rpx;
	height: 100%;
}

.u-tab-item {
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
	line-height: 1;
}

.u-tab-item-active {
	position: relative;
	color: #06A446;
	font-size: 30rpx;
	font-weight: 500;
	background: #D6FFE7;
}

.u-tab-item-active::before {
	content: "";
	position: absolute;
	border-left: 4px solid #06A446;
	height: 52rpx;
	left: 0;
	top: 29rpx;
}

.u-tab-view {
	height: 100%;
}

.right-box {
	background-color: rgb(250, 250, 250);
}

.page-view {
	padding: 16rpx;
}

.class-item {
	margin-bottom: 30rpx;
	background-color: #fff;
	padding: 16rpx;
	border-radius: 8rpx;
}

.class-item:last-child {
	min-height: 100vh;
}

.item-title {
	font-size: 26rpx;
	color: $u-main-color;
	font-weight: bold;
}

.item-menu-name {
	margin-top: 8rpx;
	font-weight: normal;
	font-size: 24rpx;
	color: $u-main-color;
}

.item-container {
	display: flex;
	flex-wrap: wrap;
}

.thumb-box {
	width: 33.333333%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 20rpx;
}

.item-menu-image {
	width: 120rpx;
	height: 120rpx;
}

二、添加逻辑层业务

  1. 分别获取左侧和右侧每一个类别的高度

我们知道，在uniapp里面没有window对象和dom元素，所以如果我们要获取页面上的一些节点信息时，需要通过uni.createSelectorQuery()这个API来获取，这里不再赘述。—— 《传送地址》

/**
* 获取一个目标元素的高度
* @elClass 元素的类名
* @dataVal 储存高度的对象
*/
methods: {
    getElRect(elClass, dataVal) {
		new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			query.select('.' + elClass).fields({
				size: true
			}, res => {
				// 如果节点尚未生成，res值为null，循环调用执行
				if (!res) {
					setTimeout(() => {
						this.getElRect(elClass);
					}, 10);
					return;
				}
				this[dataVal] = res.height;
				resolve();
			}).exec();
		})
	}
}
  1. 计算右侧每个分类距离顶部的高度并保存
onReady() {
	this.getMenuItemTop()
},
mehods: {
    /**
	* 获取右边菜单每个item到顶部的距离
	* 储存到 arr 数组里面用于后面滚动判断
	*/
	getMenuItemTop() {
		new Promise(resolve => {
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
				// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
				if(!rects.length) {
					setTimeout(() => {
						this.getMenuItemTop();
					}, 10);
					return ;
				}
				rects.forEach((rect) => {
					// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
					// this.arr.push(rect.top - rects[0].top);
					this.arr.push(rect.top)
					resolve();
				})
			}).exec()
		})
	},
}
  1. 监听右侧元素滚动时交互的状态

节点布局交叉状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。这里也不再赘述，不懂的直接阅读文档 —— 《传送地址》

methods: {
	/**
	* 观测元素相交状态
	* 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
	* 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
	*/
	async observer() {
		this.tabbar.map((val, index) => {
			let observer = uni.createIntersectionObserver(this);
			observer.relativeTo('.right-box', {
				top: 0
			}).observe('#item' + index, res => {
				if (res.intersectionRatio > 0) {
					let id = res.id.substring(4);
					this.leftMenuStatus(id);
				}
			})
		})
	},
	/**
	* 设置左边菜单的滚动状态
	* @index 传入的 ID
	*/
	async leftMenuStatus(index) {
		this.current = index;
		// 如果为0，意味着尚未初始化
		if (this.menuHeight == 0 || this.menuItemHeight == 0) {
			await this.getElRect('menu-scroll-view', 'menuHeight');
			await this.getElRect('u-tab-item', 'menuItemHeight');
		}
		// 将菜单活动item垂直居中
		this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
	}
}
  1. 实现左侧菜单点击联动右侧滚动
methods: {
	/**
	* 点击左边的栏目切换
	* @index 传入的 ID
	*/
	async swichMenu(index) {
		if(this.arr.length == 0) {
			await this.getMenuItemTop();
		}
		if (index == this.current) return;
		this.scrollRightTop = this.oldScrollTop;
		this.$nextTick(function(){
			this.scrollRightTop = this.arr[index];
			this.current = index;
			this.leftMenuStatus(index);
		})
	},
}
  1. 实现右侧菜单滚动联动左侧高亮
methods: {
	/**
	* 右边菜单滚动
	* 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
	*/
	async rightScroll(e) {
		this.oldScrollTop = e.detail.scrollTop;
		if(this.arr.length == 0) {
			await this.getMenuItemTop();
		}
		if(this.timer) return ;
		if(!this.menuHeight) {
			await this.getElRect('menu-scroll-view', 'menuHeight');
		}
		setTimeout(() => { // 节流
			this.timer = null;
			// scrollHeight为右边菜单垂直中点位置
			// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
			// scrollHeight为右边菜单头部位置
			let scrollHeight = e.detail.scrollTop + 20;
			for (let i = 0; i < this.arr.length; i++) {
				let height1 = this.arr[i];
				let height2 = this.arr[i + 1];
				if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
					this.leftMenuStatus(i);
					return ;
				}
			}
		}, 10)
	}
}

三、最后tabbar数据

[
    {
        "name":"蔬菜水果",
        "foods":[
            {
                "cat":383,
                "name":"蔬菜",
                "icon":"http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
                "key":"蔬菜"
            },
            {
                "cat":384,
                "name":"食用菌",
                "icon":"http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
                "key":"食用菌"
            },
            {
                "cat":385,
                "name":"水果",
                "icon":"http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
                "key":"水果"
            }
        ]
    },
    {
        "name":"畜禽养殖",
        "foods":[
            {
                "cat":388,
                "name":"禽类",
                "icon":"http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png",
                "key":"禽类"
            },
            {
                "cat":389,
                "name":"畜类",
                "icon":"http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png",
                "key":"畜类"
            },
            {
                "cat":391,
                "name":"蛋类",
                "icon":"http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png",
                "key":"蛋类"
            },
            {
                "cat":390,
                "name":"水产",
                "icon":"http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png",
                "key":"水产"
            }
        ]
    },
    {
        "name":"粮油副食",
        "foods":[
            {
                "cat":393,
                "name":"米面粮油",
                "icon":"http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png",
                "key":"米面粮油"
            },
            {
                "cat":394,
                "name":"坚果干果",
                "icon":"http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png",
                "key":"坚果干果"
            },
            {
                "cat":395,
                "name":"加工食品",
                "icon":"http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png",
                "key":"加工食品"
            },
            {
                "cat":396,
                "name":"茶烟酒",
                "icon":"http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png",
                "key":"茶烟酒"
            }
        ]
    },
    {
        "name":"花卉苗木",
        "foods":[
            {
                "cat":398,
                "name":"鲜花盆景",
                "icon":"http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png",
                "key":"鲜花盆景"
            },
            {
                "cat":399,
                "name":"果树苗",
                "icon":"http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png",
                "key":"果树苗"
            },
            {
                "cat":400,
                "name":"蔬瓜种子",
                "icon":"http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png",
                "key":"蔬瓜种子"
            },
            {
                "cat":401,
                "name":"经济作物",
                "icon":"http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png",
                "key":"经济作物"
            }
        ]
    },
    {
        "name":"中草药材",
        "foods":[
            {
                "cat":403,
                "name":"全草类",
                "icon":"http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png",
                "key":"全草类"
            },
            {
                "cat":405,
                "name":"根茎皮叶花",
                "icon":"http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png",
                "key":"根茎皮叶花"
            },
            {
                "cat":406,
                "name":"滋补品类",
                "icon":"http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png",
                "key":"滋补品类"
            },
            {
                "cat":404,
                "name":"果实籽仁类",
                "icon":"http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png",
                "key":"果实籽仁类"
            }
        ]
    },
    {
        "name":"其他",
        "foods":[
            {
                "cat":434,
                "name":"包装",
                "icon":"http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
                "key":"包装"
            },
            {
                "cat":435,
                "name":"安全溯源",
                "icon":"http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
                "key":"安全溯源"
            },
            {
                "cat":436,
                "name":"农用百货",
                "icon":"http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
                "key":"农用百货"
            },
            {
                "cat":437,
                "name":"仓储物流",
                "icon":"http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
                "key":"仓储物流"
            }
        ]
    }
]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409117.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue 中 iconfont 使用

Vue 中 iconfont 使用

图标库的发展过程&#xff0c;iconfont图标库的重要性&#xff08;项目常用&#xff09; 对于前端而言&#xff0c;图标的发展可谓日新月异。从img标签&#xff0c;到雪碧图&#xff0c;再到字体图标&#xff0c;svg&#xff0c;甚至svg也有了类似于雪碧图的方案svg-sprite-lo…
阅读更多...
npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？

npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？

npm run 实际上是衔接 node 和 webpack 的连接点。先看看终端运行的npm是什么，如下图： 图中的关键点是最后一行 C:\Users\***\AppData\Roaming\npm\node_modules\npm。从它可以推断出系统环境变量下配置的npm的路径为C:\Users\***\AppData\Roaming\npm，可以去环境变量中确认…
阅读更多...
css实现炫酷充电动画

css实现炫酷充电动画

先绘制一个电池&#xff0c;电池头部和电池的身体 这里其实就是两个div&#xff0c;使用z-index改变层级&#xff0c;电池的身体盖住头部&#xff0c;圆角使用border-radius完成 html部分,完整的css部分在最后 <div class"chargerBox"><div class"ch…
阅读更多...
Vue ref获取元素和组件实例

Vue ref获取元素和组件实例

获取元素 获取元素还不简单&#xff1f;直接document.querySelector(“#id”)不就获取到了吗&#xff1f;例如下面的代码。在写Vue的过程中&#xff0c;我们从来不会写这种代码&#xff0c;但是下面的代码在vue里面是可以运行的。 methods:{getEl(){let title document.queryS…
阅读更多...
CSS实现: 水平居中 的几种方法

CSS实现: 水平居中 的几种方法

实现方法&#xff1a; 1、添加 margin 值 auto 2、定位 position(子绝父相) 偏移值 left margin-left 回退 [ 需要计算&#xff0c;有点 麻烦 ] 3、定位 position(子绝父相) 偏移值 left CSS-2d transform 4、文字居中 text-align:center; 行内块元素 5、弹性盒子布局 [ 推…
阅读更多...
vue之@click绑定的函数，如何实现加不加括号都可执行

vue之@click绑定的函数，如何实现加不加括号都可执行

这篇文章的由来&#xff0c;其实是朋友在群里好奇click绑定方式的种类&#xff0c;大家七嘴八舌讨论出来的&#xff0c;觉得过程还是比较有意义&#xff0c;就记录下来&#xff1a; 1、原生js绑定点击事件 好久不用原生js绑定事件&#xff0c;基本都已经忘了怎么绑定。还把括号…
阅读更多...
es6的some和every方法使用；

es6的some和every方法使用；

文章略长&#xff0c;但比较简单。 es6中的数组方法some()和every()都接收一个回调函数作为参数&#xff0c;该回调函数又接收三个参数&#xff0c;分别是数组元素、数组元素的索引、调用some或every方法的数组本身。它们的区别就是&#xff1a; some方法用于判断数组中是否存…
阅读更多...
node-sass安装报错及其解决方案

node-sass安装报错及其解决方案

一、下载依赖报错 这里报错了也就没后面的剧情了&#xff0c;就像电视剧刚开局主角就嗝屁了&#xff0c;看看执行 npm i 的时候报错类容&#xff1a; 二、解决方案 1、下载源在国外&#xff0c;更换中国镜像源&#xff0c;删除package.json中的node-sass,分别下载node包和node-…
阅读更多...
你的应用太慢了，给我司带来了巨额损失，该怎么办

你的应用太慢了，给我司带来了巨额损失，该怎么办

记得很久之前看过谷歌官方有这么样的声明&#xff1a;如果一个页面的加载时间从 1 秒增加到3 秒&#xff0c;那么用户跳出的概率将增加 32%。 但是早在 2012 年&#xff0c;亚马逊就计算出了&#xff0c;页面加载速度一旦下降一秒钟&#xff0c;每年就会损失 16 亿美元的销售额…
阅读更多...
〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…
阅读更多...
HTML 基本开发方式，学会常用的 HTML 标签

HTML 基本开发方式，学会常用的 HTML 标签

一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单&#xff0c;语法风格和 Java 之类的差别很大&#xff0c;(并不能表达一些逻辑&#xff0c;而只是能表达 “有哪些东西" 一种信息)&#xff0c;使用记事本创建一个文件&#xff0c;后缀名改成 .html 即可…
阅读更多...
Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

背景: 当点击按钮时候&#xff0c;正常情况控制台的Network应该要发送一个变化量&#xff0c;现在控制台的Network不仅不显示&#xff0c;而且还报错&#xff0c;报错信息如下&#xff1a; vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: …
阅读更多...
【React全家桶】Flux与Redux

【React全家桶】Flux与Redux

&#x1f39e;️&#x1f39e;️&#x1f39e;️ 博主主页&#xff1a; 糖 &#xff0d;O&#xff0d; &#x1f449;&#x1f449;&#x1f449; react专栏&#xff1a;react全家桶 &#x1f339;&#x1f339;&#x1f339;希望各位博主多多支持&#xff01;&#xff01;&a…
阅读更多...
Vue3.0 项目启动（打造企业级音乐App）

Vue3.0 项目启动（打造企业级音乐App）

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…
阅读更多...
功能：Session与Vue：登录获取权限，并完成session存储

功能：Session与Vue：登录获取权限，并完成session存储

一、需求说明 1、系统登录&#xff0c;每个账号表示一位用户&#xff0c;每位用户分配有不同的权限&#xff0c;不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限&#xff0c;在登录系统中进行使用&#xff0c;退出时则清空权限。 3、项目框架&#x…
阅读更多...
一个非常好看的前端Vue3登录页面

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…
阅读更多...
HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…
阅读更多...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…
阅读更多...
Nginx部署前端静态网站详细教学（一步步操作）

Nginx部署前端静态网站详细教学（一步步操作）

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …
阅读更多...
你评论，我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

你评论，我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023