小程序模板網(wǎng)

微信小程序修改自定義input

發(fā)布時(shí)間：2018-05-30 11:30 所屬欄目：小程序開發(fā)教程

在微信小程序中是不能修改input樣式的 甚至修改大小也不能，那么怎么做一個(gè)自定義樣式的input呢

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

首先請(qǐng)求后臺(tái)接口獲取數(shù)據(jù)

 


    
	
  1. 
		wx.request({
    2. 
	
  2. 
		url: imgsrc + '/wechar/product/getproduct',
    3. 
	
  3. 
		data: '',
    4. 
	
  4. 
		header: {},
    5. 
	
  5. 
		method: 'GET',
    6. 
	
  6. 
		dataType: 'json',
    7. 
	
  7. 
		responseType: 'text',
    8. 
	
  8. 
		success: function (res) {
    9. 
	
  9. 
		console.log(res);
    10. 
	
  10. 
		that.setData({
    11. 
	
  11. 
		product: res.data,
    12. 
	
  12. 
		});
    13. 
	
  13. 
		 
    14. 
	
  14. 
		},
    15. 
	
  15. 
		})
    16. 
	
  16. 
		　　
    17. 




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



	



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



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



	 




    
	
  1. 
		<view class="boxaa" wx:for="{{product}}" >
    2. 
	
  2. 
		<view class='gongpin'>
    3. 
	
  3. 
		<image src='{{imgsrc+item.pro_imgs}}'></image>
    4. 
	
  4. 
		<view class='descript'>{{item.pro_name}}</view>
    5. 
	
  5. 
		<view class='price'>{{item.pro_price}}</view>
    6. 
	
  6. 
		</view>
    7. 
	
  7. 
		<image class='radiocheck' data-proid="{{item.pro_id}}" bindtap='cli1' src='../../imgs/{{item.imgsrc}}'data-name="{{item.pro_name}}" data-id="{{index}}" ></image>
    8. 




	js代碼



	 




    
	
  1. 
		cli1:function(res)
    2. 
	
  2. 
		{
    3. 
	
  3. 
		　　　　//獲取數(shù)組的下標(biāo) 用來(lái)確認(rèn)點(diǎn)擊的是那個(gè)按鈕
    4. 
	
  4. 
		　　 var id = res.currentTarget.dataset.id;
    5. 
	
  5. 
		　　　　//把選中的商品名字存起來(lái)
    6. 
	
  6. 
		selectedProName = res.currentTarget.dataset.name;
    7. 
	
  7. 
		　　//把選中的商品id存起來(lái)
    8. 
	
  8. 
		　　 selectedProId = res.currentTarget.dataset.proid;
    9. 
	
  9. 
		　　
    10. 
	
  10. 
		 
    11. 
	
  11. 
		　　//因?yàn)槭菃芜x按鈕首先循環(huán)所有的商品把input改為未選中的狀態(tài)
    12. 
	
  12. 
		for (var x in product) {
    13. 
	
  13. 
		product[x].imgsrc = "radio.png";
    14. 
	
  14. 
		}
    15. 
	
  15. 
		　　//根據(jù)獲取過來(lái)的數(shù)組下標(biāo)判斷input是否是選中狀態(tài) 如果是切換為未選中狀態(tài) 如果不是改為選中狀態(tài)
    16. 
	
  16. 
		if (product[id].imgsrc == "radio.png") {
    17. 
	
  17. 
		product[id].imgsrc = "radio_n.png";
    18. 
	
  18. 
		} else {
    19. 
	
  19. 
		product[id].imgsrc = "radio.png";
    20. 
	
  20. 
		}
    21. 
	
  21. 
		　　把整個(gè)數(shù)組存入data中
    22. 
	
  22. 
		this.setData({
    23. 
	
  23. 
		product: product,
    24. 
	
  24. 
		});
    25. 
	
  25. 
		}
    26. 




	

            


            


            

            

                
                

                    本文地址：http://22321a.com/wxmini/doc/course/24484.html 復(fù)制鏈接 
                    如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢