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

這篇文章主要介紹微信小程序如何修改自定義input ，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

說一下我做的input的原理 有兩張圖片 一張是未選中的(input.png)一張是已經(jīng)選中的 (input_n.png) 更具點擊事件bindtap 事件來更換圖片的路徑實現(xiàn)

首先請求后臺接口獲取數(shù)據(jù)

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. })

16. 
    

獲得數(shù)據(jù)格式，

把這些數(shù)據(jù)存入data里面

在wxml中寫循環(huán)給圖片寫入事件cli1 把數(shù)組下標存入data-id 用于區(qū)分點擊了哪個按鈕

1. <view class="boxaa" wx:for="{{product}}" >

2. <view class='gongpin'>

3. <image src='{{imgsrc+item.pro_imgs}}'></image>

4. <view class='descript'>{{item.pro_name}}</view>

5. <view class='price'>{{item.pro_price}}</view>

6. </view>

7. <image class='radiocheck' data-proid="{{item.pro_id}}" bindtap='cli1' src='../../imgs/{{item.imgsrc}}'data-name="{{item.pro_name}}" data-id="{{index}}" ></image>

js代碼

1. cli1:function(res)

2. {

3. 　　　　//獲取數(shù)組的下標 用來確認點擊的是那個按鈕

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

5. 　　　　//把選中的商品名字存起來

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

7. 　　//把選中的商品id存起來

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

9. 
   

10.  

11. 　　//因為是單選按鈕首先循環(huán)所有的商品把input改為未選中的狀態(tài)

12. for (var x in product) {

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

14. }

15. 　　//根據(jù)獲取過來的數(shù)組下標判斷input是否是選中狀態(tài) 如果是切換為未選中狀態(tài) 如果不是改為選中狀態(tài)

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

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

18. } else {

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

20. }

21. 　　把整個數(shù)組存入data中

22. this.setData({

23. product: product,

24. });

25. }

以上是“微信小程序如何修改自定義input ”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！