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.messagethis.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":"继上编欧式客厅装修效果图之后，今天，小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国，因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果，也吸取了洛可可风格中唯美、律…"},]
}