How to modify custom input by WeChat Mini Programs
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!
