在微信小程序中是不能修改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ù)
-
wx.request({
-
url: imgsrc + '/wechar/product/getproduct',
-
data: '',
-
header: {},
-
method: 'GET',
-
dataType: 'json',
-
responseType: 'text',
-
success: function (res) {
-
console.log(res);
-
that.setData({
-
product: res.data,
-
});
-
-
},
-
})
-
獲得數(shù)據(jù)格式
把這些數(shù)據(jù)存入data里面
在wxml中寫循環(huán)給圖片寫入事件cli1 把數(shù)組下標(biāo)存入data-id 用于區(qū)分點(diǎn)擊了哪個(gè)按鈕
-
<view class="boxaa" wx:for="{{product}}" >
-
<view class='gongpin'>
-
<image src='{{imgsrc+item.pro_imgs}}'></image>
-
<view class='descript'>{{item.pro_name}}</view>
-
<view class='price'>{{item.pro_price}}</view>
-
</view>
-
<image class='radiocheck' data-proid="{{item.pro_id}}" bindtap='cli1' src='../../imgs/{{item.imgsrc}}'data-name="{{item.pro_name}}" data-id="{{index}}" ></image>
js代碼
-
cli1:function(res)
-
{
-
//獲取數(shù)組的下標(biāo) 用來(lái)確認(rèn)點(diǎn)擊的是那個(gè)按鈕
-
var id = res.currentTarget.dataset.id;
-
//把選中的商品名字存起來(lái)
-
selectedProName = res.currentTarget.dataset.name;
-
//把選中的商品id存起來(lái)
-
selectedProId = res.currentTarget.dataset.proid;
-
-
-
//因?yàn)槭菃芜x按鈕首先循環(huán)所有的商品把input改為未選中的狀態(tài)
-
for (var x in product) {
-
product[x].imgsrc = "radio.png";
-
}
-
//根據(jù)獲取過來(lái)的數(shù)組下標(biāo)判斷input是否是選中狀態(tài) 如果是切換為未選中狀態(tài) 如果不是改為選中狀態(tài)
-
if (product[id].imgsrc == "radio.png") {
-
product[id].imgsrc = "radio_n.png";
-
} else {
-
product[id].imgsrc = "radio.png";
-
}
-
把整個(gè)數(shù)組存入data中
-
this.setData({
-
product: product,
-
});
-
}