上一篇文章，已经实现了联系我们，地图显示，拨打电话。

官方文档：https://uniapp.dcloud.net.cn/component/scroll-view.html

修改 pages/pics/pics.uvue文件，增加view

完整代码如下：

1)">index==1?'active':''

style="color:

{{index}}</view></scroll-view></view>

</template><script>

style="color:

</script><style

lang=

:class="index==1?'active':''"，表示第一个高亮显示。

src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251031160331872-1797882765.gif"

alt="动画"

左侧展示的分类是固定的，接下来需要调用api接口，渲染数据

修改 pages/pics/pics.uvue文件，调用api

完整代码如下：

1)">index==1?'active':''

style="color:

1)">{{item.title}}</view></scroll-view></view>

</template><script>

style="color:

1)">/api/getimgcategory

style="color:

</script><style

lang=

这里定义了一个方法getPicsList，获取图片分类数据，然后使用for循环遍历。

src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251031164718884-773989847.png"

alt="image"

修改 pages/pics/pics.uvue文件，增加点击事件，class动态判断

1)">active==index?'active':''

style="color:

1)">leftCliclActive(index,item.id)

style="color:

1)">{{item.title}}</view></scroll-view></view>

</template><script>

style="color:

1)">/api/getimgcategory

style="color:

err.statusCode,});}},

style="color:

</script><style

lang=

leftCliclActive，点击分类设置为active，需要传递2个参数

active，这个是在data里面定义的，用来判断是否高亮显示。

:class="active==index?'active':''，根据点击的索引值进行判断，是否增加高亮显示的样式。

src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251031165656266-1766577277.gif"

alt="动画"

---