小程序模板网

微信小程序修改自定义input

在微信小程序中是不能修改input样式的 甚至修改大小也不能,那么怎么做一个自定义样式的input呢

说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap 事件来更换图片的路径实现

首先请求后台接口获取数据

 

  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.   

获得数据格式

把这些数据存入data里面

在wxml中写循环给图片写入事件cli1 把数组下标存入data-id 用于区分点击了哪个按钮

 

  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.     //获取数组的下标 用来确认点击的是那个按钮
  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.   //因为是单选按钮首先循环所有的商品把input改为未选中的状态
  12. for (var x in product) {
  13. product[x].imgsrc = "radio.png";
  14. }
  15.   //根据获取过来的数组下标判断input是否是选中状态 如果是切换为未选中状态 如果不是改为选中状态
  16. if (product[id].imgsrc == "radio.png") {
  17. product[id].imgsrc = "radio_n.png";
  18. } else {
  19. product[id].imgsrc = "radio.png";
  20. }
  21.   把整个数组存入data中
  22. this.setData({
  23. product: product,
  24. });
  25. }


本文地址:https://www.eyoucms.com/wxmini/doc/course/24484.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询