微信小程序开发修改自定义input

2018-10-24 15:28

摘要:在微信小程序中是不能修改input样式的 甚至修改大小也不能,那么怎么做一个自定义样式的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里面

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,
    });
  }

width=700


相关资讯: 微信小程序   微信小程序开发教程


参与讨论

发表评论

扫码添加专属客服即可随时咨询

还可领取小程序推广攻略