uniapp实现组件竖版菜单

社区图片页面

scroll-view scroll-view | uni-app官网 (dcloud.net.cn)

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>  scroll-y 允许纵向滚动
			<view @click="leftClickHandle(index,item.id)" :class="active===index?'active':''"
				v-for="(item,index) in cates" :key="item.id">
				{{item.title}}
			</view>
            
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="item in secondData" :key="item.id">
				<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="secondData.length === 0">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
        //如何做高亮显示active == 当前选中分类的索引时 表达式 :class="active===index?'active':'' 
		data() {
			return {
				cates: [],
				active: 0,
				secondData: []
			}
		},
		methods: {
            //获取分类数据
			async getPicsCate() {
				const res = await this.$myRequest({
					url: '/api/getimgcategory'
				})
				this.cates = res.data.message
				this.leftClickHandle(0, this.cates[0].id)//根据一级分类的初始ID获取了二级分类
			},
            //获取右侧图片数据
			async leftClickHandle(index, id) {
				this.active = index //高亮左侧使用的
				// 获取右侧的数据
				const res = await this.$myRequest({
					url: '/api/getimages/' + id
				})
				this.secondData = res.data.message
			},
			previewImg(current) {//预览图片
				const urls = this.secondData.map(item => {//连续预览图片
					return item.img_url
				})
				uni.previewImage({
					current,//点击的当前图片
					urls
				})
			}
		},

		onLoad() {
			this.getPicsCate()
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.pics {
		height: 100%;
		display: flex;
		.left {
			width: 200rpx;
			height: 100%;
			border-right: 1px solid #eee;
			view {
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}
			.active {//选中的样式
				background: $shop-color;
				color: #fff;
			}
		}
		.right {
			height: 100%;
			width: 520rpx;
			margin: 10rpx auto;

			.item {
				image {
					width: 520rpx;
					height: 520rpx;
					border-radius: 5px;
				}

				text {
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>

获取图片分类

接口地址： /api/getimgcategory

请求方式：GET

参数：无

数据格式：

{
  "status":0,
  "message":[
    {"title":"家居生活","id":14},
    {"title":"摄影设计","id":15},
    {"title":"明星美女","id":16},
    {"title":"空间设计","id":17},
    {"title":"古典美女","id":24}
  ]
}

二级图片列表

接口地址：/api/getimages/:cateid

请求方式：GET

参数：cateid: 图片的类别id，传入url写法： /api/getimages/23

数据格式：

{
  "status":0,
    "message":[
      {
        "id":40,
        "title":"欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果",
        "img_url":"http://demo.dtcms.net/upload/201504/18/thumb_201504181246376332.jpg",
        "zhaiyao":"继上编欧式客厅装修效果图之后，今天，小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国，因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果，也吸取了洛可可风格中唯美、律…"},
    ]
}