如何将uni-app开发商城社区图片右侧数据渲染成预览？
摘要：一、概述 上一篇文章，已经实现了社区图片，左侧结构样式，数据渲染，点击高亮。 接下来，实现社区图片右侧数据渲染，预览图片。 整体效果如下： 二、api接口调用 点击每个分类，需要调用api接口 修改 pagesp
一、概述
上一篇文章，已经实现了社区图片，左侧结构样式，数据渲染，点击高亮。
接下来，实现社区图片右侧数据渲染，预览图片。
整体效果如下：
二、api接口调用
点击每个分类，需要调用api接口
修改pages/pics/pics.uvue文件，修改方法leftCliclActive，调用api
//点击分类设置为active，并获取当前分类数据
async leftCliclActive(index, id) {
console.log("点击的分类下标：", index, "id：", id);
this.active = index;
//携带当前分类的id参数，获取当前分类的数据
const res = await this.$http.get('/api/getimages/' + id, {})
console.log("res" + id, res)
this.secondData = res.message;
console.log("分类id：" + id + "当前分类包含的数据", this.secondData);
},
注意：这里是根据分类id，来获取数据的。
三、右侧结构
右侧展示的内容，需要使用scroll-view，因为内容比较多，需要上下滑动展示。
修改pages/pics/pics.uvue文件，右侧先固定一个内容，效果如下
<template>
<view>
<view class="pics">
<!-- 左侧分类 -->
<scroll-view class="left" style="width: 200rpx;height: 100vh;border-right: 1px solid #eee;" scroll-y="true">
<view :class="active==index?'active':''" @click="leftCliclActive(index,item.id)"
v-for="(item,index) in picCates" :key="item.id">
{{item.title}}
</view>
</scroll-view>
<!-- 右侧分类对应的数据 -->
<scroll-view class="right" scroll-y="true">
<view class="item">
<image src="https://picsum.photos/600/400?random=1"></image>
<text>欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//分类数据
picCates: [],
//选中高亮 默认0，判断+1
active: 0,
//二级分类的数据
secondData: [],
}
},
onLoad() {
//页面加载执行的方法，直接获得到图片分类数据
this.getPicsList();
},
methods: {
//获取图片分类
async getPicsList() {
const _this = this;
// const res = await _this.$myRequest({
// url: "/api/getimgcategory"
// });
const res = await this.$http.get('/api/getimgcategory', {})
console.log("分类列表数据", res.data);
// 分类数据回显
this.picCates = res.message;
//刷新的时候 默认选中的一项每页数据展示，此操作避免
//页面进来 一级分类的id直接获取到二级分类的数据. 参数1 高亮数据 参数2 分类详情
this.leftCliclActive(0, this.picCates[0].id);
},
//点击分类设置为active，并获取当前分类数据
async leftCliclActive(index, id) {
console.log("点击的分类下标：", index, "id：", id);
this.active = index;
//携带当前分类的id参数 获取当前分类的数据，
const res = await this.$http.get('/api/getimages/' + id, {})
console.log("res" + id, res)
this.secondData = res.message;
console.log("分类id：" + id + "当前分类包含的数据", this.secondData);
},
}
}
</script>
<style lang="scss">
.pics {
height: 100%;
display: flex;
// 子元素自动水平排列
flex-direction: row;
.left {
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: 7px;
}
text {
font-size: 30rpx;
line-height: 60rpx;
}
}
}
}
</style>
编译运行，效果如下：
四、数据渲染
将右侧数据，使用api数据渲染，使用for循环
<scroll-view class="right" scroll-y="true">
<view class="item" v-for="(item,index) in secondData" :key="index">
<image :src="item.img_url"></image>
<text>{{item.title}}</text>
</view>
</scroll-view>
效果如下：
五、暂无数据
这里有一个问题，有些分类是没有数据的，所以要做一个判断，api结果返回为空时，显示暂无数据。
<!-- 右侧分类对应的数据 -->
<scroll-view class="right" scroll-y="true">
<text v-if="secondData.length==0">暂无数据</text>
<view class="item" v-for="(item,index) in secondData" :key="index">
<image :src="item.img_url"></image>
<text>{{item.title}}</text>
</view>
</scroll-view>
编译运行，效果如下：
六、预览图片
uni.previewImage
官方文档：https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject
主要参数有2个，current，urls
查看分类时，展示的图片比较多。因此，需要做一个图片预览功能，可以左右滑动多张图片。
current就是当前点击的图片，urls需要从secondData里面遍历数据，找到图片链接img_url
那么就可以用map方法
//遍历出所有图片
const urlAll = this.secondData.map(item => {
return item.img_url;
})
修改pages/pics/pics.uvue文件，增加点击事件，传入当前图片地址
完整代码如下：
<template>
<view>
<view class="pics">
<!-- 左侧分类 -->
<scroll-view class="left" style="width: 200rpx;height: 100vh;border-right: 1px solid #eee;" scroll-y="true">
<view :class="active==index?'active':''" @click="leftCliclActive(index,item.id)"
v-for="(item,index) in picCates" :key="item.id">
{{item.title}}
</view>
</scroll-view>
<!-- 右侧分类对应的数据 -->
<scroll-view class="right" scroll-y="true">
<text v-if="secondData.length==0">暂无数据</text>
<view class="item" v-for="(item,index) in secondData" :key="index">
<image :src="item.img_url" @click="previewImg(item.img_url)"></image>
<text>{{item.title}}</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//分类数据
picCates: [],
//选中高亮 默认0，判断+1
active: 0,
//二级分类的数据
secondData: [],
}
},
onLoad() {
//页面加载执行的方法，直接获得到图片分类数据
this.getPicsList();
},
methods: {
//获取图片分类
async getPicsList() {
const _this = this;
// const res = await _this.$myRequest({
// url: "/api/getimgcategory"
// });
const res = await this.$http.get('/api/getimgcategory', {})
console.log("分类列表数据", res.data);
// 分类数据回显
this.picCates = res.message;
//刷新的时候 默认选中的一项每页数据展示，此操作避免
//页面进来 一级分类的id直接获取到二级分类的数据. 参数1 高亮数据 参数2 分类详情
this.leftCliclActive(0, this.picCates[0].id);
},
//点击分类设置为active，并获取当前分类数据
async leftCliclActive(index, id) {
console.log("点击的分类下标：", index, "id：", id);
this.active = index;
//携带当前分类的id参数 获取当前分类的数据，
const res = await this.$http.get('/api/getimages/' + id, {})
console.log("res" + id, res)
this.secondData = res.message;
console.log("分类id：" + id + "当前分类包含的数据", this.secondData);
},
// 点击预览图片
previewImg(current_url) {
//遍历出所有图片
const urlAll = this.secondData.map(item => {
return item.img_url;
})
console.log("urls", urlAll);
uni.previewImage({
//点击的图片 如不配置。每次都会从第一张图开始预览
current: current_url,
//预览图片 遍历出的图片地址
urls: urlAll
})
}
}
}
</script>
<style lang="scss">
.pics {
height: 100%;
display: flex;
// 子元素自动水平排列
flex-direction: row;
.left {
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: 7px;
}
text {
font-size: 30rpx;
line-height: 60rpx;
}
}
}
}
</style>
编译运行，效果如下：