如何uni-app开发商城社区图片左侧结构样式数据渲染点击高亮？
摘要：一、概述 上一篇文章，已经实现了联系我们，地图显示，拨打电话。 接下来，实现社区图片，左侧结构样式，效果如下： 二、scroll-view 可滚动视图区域。用于区域滚动。 官方文档：https:uniapp.dcloud.net.cn
一、概述
上一篇文章，已经实现了联系我们，地图显示，拨打电话。
接下来，实现社区图片，左侧结构样式，效果如下：
二、scroll-view
可滚动视图区域。用于区域滚动。
官方文档：https://uniapp.dcloud.net.cn/component/scroll-view.html
修改pages/pics/pics.uvue文件，增加view
完整代码如下：
<template>
<view class="pics">
<!-- 左侧分类 -->
<scroll-view class="left" style="width: 200rpx;height: 100vh;border-right: 1px solid #eee;" scroll-y="true">
<view v-for="index in 20" :key="index" :class="index==1?'active':''">
家居生活 {{index}}
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
page {
display: flex;
height: 100%;
}
.pics {
height: 100%;
display: flex;
.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;
}
}
}
</style>
说明：
scroll-y="true"，允许纵向滚动
view做了一下for循环，模拟2个分类。
:class="index==1?'active':''"，表示第一个高亮显示。
编译运行，效果如下：
可以看到左侧区域，能上下滑动。