Shulou(Shulou.com)06/01 Report--

This article mainly introduces WeChat Mini Programs how to modify the custom input, the article is very detailed, has a certain reference value, interested friends must read it!

To talk about the principle of input that I made, there are two pictures, one is unselected (input.png) and the other is already selected (input_n.png). More click event bindtap event to change the path implementation of the image.

First request the background interface to get the data

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

});

}

})

Get the data format

Store this data in data

Write loop to picture write event in wxml cli1 stores array subscript in data-id to distinguish which button is clicked

{{item.pro_name}}

{{item.pro_price}}

Js code

Cli1:function (res)

{

/ / get the subscript of the array to confirm which button is clicked

Var id = res.currentTarget.dataset.id

/ / save the selected product name

SelectedProName = res.currentTarget.dataset.name

/ / save the selected item id

SelectedProId = res.currentTarget.dataset.proid

/ / because it is the radio button that circulates all items first and changes input to unchecked state.

For (var x in product) {

Product [x] .imgsrc = "radio.png"

}

/ / determine whether input is selected according to the obtained array subscript. If it is switched to unchecked state, if it is not changed to selected state.

If (product [id] .imgsrc = = "radio.png") {

Product[ id] .imgsrc = "radio_n.png"

} else {

Product[ id] .imgsrc = "radio.png"

}

Store the entire array in data

This.setData ({

Product: product

});

}

The above is all the contents of the article "how to modify the custom input of WeChat Mini Programs". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.