uni-app使用踩坑记录总结（持续更新）

最近在用uni-app框架写小程序，碰到了一些用正常方法实现不了的地方，在此先记录一下

目录

1.动态样式display问题

2.动态切换背景图片

3.uni-list列表添加点击事件

4.输入框placeholder样式

5.给图片添加点击动画

---

1.动态样式display问题

先上图：

 如图，正常我们会用上面一种格式，但本人在写的过程中发现一直报错，后来想着会不会是框架的语法格式会有所不同，上网一查，果然如此。

2.动态切换背景图片

标记3为错误示范

 正确代码在这：

				
				{{item.title}}
			

动态显示背景图时，如图标注3，注意：微信小程序里背景图片只能使用网页资源或base64（相对较为繁琐），使用本地图片只能在模拟器上显示，真机上不渲染。

解决方法：使用image标签动态渲染，加上定位来代替背景图片，如上代码块可以正常实现。

标注1：如果需要为v-for循环出的每个元素添加不同的样式，那么此段代码可以动态生成不同类名，使用类名添加样式（如定位，尺寸等）即可。

本人在试错过程中尝试了：elementname:nth-child(n)，很遗憾不生效。

标注2：hover-class这个属性可以让元素被点击时添加样式，如加背景色等。

注意：图片大于40kb小程序无法显示本地图片，只能另寻方法。

3.uni-list列表添加点击事件

 uni-app的扩展组件，uni-list及子元素uni-list-item使用时，注意参考官方文档，链接：uni-app官网

直接自定义onclick事件是不生效的，需要添加clickable属性，开启点击反馈，才能正常添加事件，还有一点如图标注，进行页面跳转时 ，有to 属性可直接填写页面路径，如使用uni.navigateTo方法也是不生效的。

4.输入框placeholder样式

    IP
    

使用placeholder-style可以设置提示词的样式。

5.给图片添加点击动画

通过三元表达式，控制类名class，从而实现动画的展示（不足：第一次点击顺时针，第二次逆时针）