微信小程序如何修改自定义input

这篇文章主要介绍微信小程序如何修改自定义input ，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap 事件来更换图片的路径实现

首先请求后台接口获取数据

1. wx.request({

2. url: imgsrc + '/wechar/product/getproduct',

3. data: '',

4. header: {},

5. method: 'GET',

6. dataType: 'json',

7. responseType: 'text',

8. success: function (res) {

9. console.log(res);

10. that.setData({

11. product: res.data,

12. });

13. },

14. })

15. 
    

获得数据格式，

把这些数据存入data里面

在wxml中写循环给图片写入事件cli1 把数组下标存入data-id 用于区分点击了哪个按钮

3. 

4. {{item.pro_name}}

5. {{item.pro_price}}

7. 

js代码

1. cli1:function(res)

2. {

3. 　　　　//获取数组的下标 用来确认点击的是那个按钮

4. 　　 var id = res.currentTarget.dataset.id;

5. 　　　　//把选中的商品名字存起来

6. selectedProName = res.currentTarget.dataset.name;

7. 　　//把选中的商品id存起来

8. 　　 selectedProId = res.currentTarget.dataset.proid;

9. 
   

10. 　　//因为是单选按钮首先循环所有的商品把input改为未选中的状态

11. for (var x in product) {

12. product[x].imgsrc = "radio.png";

13. }

14. 　　//根据获取过来的数组下标判断input是否是选中状态 如果是切换为未选中状态 如果不是改为选中状态

15. if (product[id].imgsrc == "radio.png") {

16. product[id].imgsrc = "radio_n.png";

17. } else {

18. product[id].imgsrc = "radio.png";

19. }

20. 　　把整个数组存入data中

21. this.setData({

22. product: product,

23. });

24. }

以上是"微信小程序如何修改自定义input "这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！