本文介绍了微信小程序中如何处理Base64图片在for循环中正确显示，以及如何实现分类点击选中效果，动态改变样式。通过设置`flex-wrap: wrap`解决图片换行问题，利用`bindtap`监听用户点击，结合三元运算符动态设置样式，以及在数据渲染中处理不同分类的数据展示。同时，文中强调了避免频繁请求数据以节省服务器资源。
一：分类页面布局
没有解释的部分都是之前学过的内容，如果看不懂请自行复习哦 ~
页面骨架wxml编写：
wxml分析:整个页面布局分为左右两部分，再配合列表渲染将数据传入组件。
flex-warp是什么？
我们知道，flex-direction的默认取值是row,也就是按行排列。在按行排列的时候，flex布局有一个非常沙雕的特性，它不会换行！！！
也就是不管图片有多少张，它都只有一行，超出一行大小的部分图片就消失了，看不见，不会按我们理想状态想的排到下一行。
我们需要通过flex-wrap(默认值是no-wrap也就是不换行)手动设置值为wrap(换行)。
二：拉取数据
在data.class设置所有分类名，在onLoad中向服务器拉取数据并传递给data.book
数据渲染之后如图所示：
哭了：界面长这样我也觉得不怎么好看，但是我实在是懒得想了，今天单纯想界面布局想了几个小时
三：实现点击选中某个分类
当点击微信屏幕的时候，手机系统将点击的位置的信息传递给了微信，微信再传递给了小程序，小程序
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
