微信小程序修改自定义input

在微信小程序中是不能修改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].imgsrc = "radio.png";
    }
　　//根据获取过来的数组下标判断input是不是选中状态 若是是切换为未选中状态 若是不是改成选中状态
    if (product[id].imgsrc == "radio.png") {
      product[id].imgsrc = "radio_n.png";
    } else {
      product[id].imgsrc = "radio.png";
    }
　　把整个数组存入data中
    this.setData({
      product: product,
    });
  }