微信小程序修改自定義input

在微信小程序中是不能修改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. }