2018/5/22 0:00:00
泉源:不详
作者:未知
在微信小程序中是不可修改input样式的 甚至修改巨细也不可,,,,,,那么怎么做一个自界说样式的input呢

说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事务bindtap 事务来替换图片的路径实现
首先请求后台接口获取数据
-
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,
-
});
-
-
},
-
})
-
获得数据名堂,,,,,,
把这些数据存入data内里
在wxml中写循环给图片写入事务cli1 把数组下标存入data-id 用于区分点击了哪个按钮
-
<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)
-
{
-
//获取数组的下标 用来确认点击的是谁人按钮
-
var id = res.currentTarget.dataset.id;
-
//把选中的商品名字存起来
-
selectedProName = res.currentTarget.dataset.name;
-
//把选中的商品id存起来
-
selectedProId = res.currentTarget.dataset.proid;
-
-
-
//由于是单选按钮首先循环所有的商品把input改为未选中的状态
-
for (var x in product) {
-
product[x].img/miniprogramschool//miniprogramschool/src = "radio.png";
-
}
-
//凭证获取过来的数组下标判断input是否是选中状态 若是是切换为未选中状态 若是不是改为选中状态
-
if (product[id].img/miniprogramschool/src == "radio.png") {
-
product[id].img/miniprogramschool/src = "radio_n.png";
-
} else {
-
product[id].img/miniprogramschool//miniprogramschool/src = "radio.png";
-
}
-
把整个数组存入data中
-
this.setData({
-
product: product,
-
});
-
}
【本站声明】
1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,,,若有知识产权人并不肯意我们使用,,,,,,若是有侵权请连忙联系。。。。
2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,,,仅系客观性形貌,,,,,,如您需要相识该类商品/服务详细的资讯,,,,,,请您直接与该类商品/服务的提供者联系。。。。
KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。KESION 一直通过手艺立异,,,,,,提供产品和服务,,,,,,助力企业向数字化转型,,,,,,通过科技驱动商业刷新,,,,,,让商业变得更智慧!