Table of contents
In the previous article , we introduced how to use the popup component and how to control the display and hiding of the popup component through variables. Just having a popup window component is not enough, we need to add specific options to the popup window component, the options can be selected, and the selected value will be backfilled into the page. We will introduce the specific implementation in this article.
1 Initialize the city variable
To display all the cities, you need to create a variable first. You can choose an array as the type of the variable. It
is not enough to just assign an empty value. We need to initialize the data and consider initializing it in the life cycle function.
export default {
onPageLoad(query) {
//console.log('---------> LifeCycle onPageLoad', query)
$page.dataset.state.citys = [
{
isselect:false,
name:"呼和浩特"
},
{
isselect:false,
name:"包头"
},
{
isselect:false,
name:"鄂尔多斯"
},
{
isselect:false,
name:"乌兰察布"
},
{
isselect:false,
name:"巴彦淖尔"
},
{
isselect:false,
name:"阿拉善"
},
{
isselect:false,
name:"锡林郭勒"
},
{
isselect:false,
name:"通辽"
},
{
isselect:false,
name:"呼伦贝尔"
},
{
isselect:false,
name:"兴安盟"
},
{
isselect:false,
name:"乌海"
},
{
isselect:false,
name:"赤峰"
}
]
},
onPageShow() {
//console.log('---------> LifeCycle onPageShow')
},
onPageReady() {
//console.log('---------> LifeCycle onPageReady')
},
onPageHide() {
//console.log('---------> LifeCycle onPageHide')
},
onPageUnload() {
//console.log('---------> LifeCycle onPageUnload')
},
}
For each city, we have set two properties, whether the current city is selected and the name of the city
2 loop showing city names
After the city variable is initialized, it needs to be displayed in a loop. We use ordinary containers and text components to build them.
The ordinary container can be set to flex layout, horizontal alignment, and even distribution. If the text component is wrapping
, you need to bind the loop display first. We bind our City variable
Text content, bound with an expression, showing the name of the city
$for.id8.name
Then you can set the style of the text and copy my style directly.
self {
width: 200px;
height: 70px;
margin-bottom: 15px;
display: inline-block;
line-height: 70;
text-align: center;
border-radius: 15px
}
After building, there is a requirement here is the selected city, the background color is dark gray, the unselected is light gray, we can bind a custom style
forItems.id8.isselect===true?{
background:'#737373'}:{
background:'#ededf0'}
3 Click the city to switch the background color and backfill the city name
After initializing the background color of the city, we need to add a custom method to switch the background color and backfill the city name when clicking on the city
export default function({
event, data}) {
console.log(data)
$page.dataset.state.citys.map((item,index)=>{
if(item.name===data.target.name){
item.isselect = true
}else{
item.isselect = false
}
})
$app.dataset.state.area=data.target.name
}
When calling, you need to pass in the loop object
, so that all functions are set
Summarize
If you want to dynamically change the background color of a component, the core point is to achieve it through custom styles. The key is to practice and master it yourself. If you find it useful, feel free to practice.
The author has 15 years of IT experience and is currently focusing on low-code evangelism. If you have zero foundation and want to make your own applications, please contact me. Contact information at the end of the article