this is a list of my projects. Through the wx:for loop.
<block wx:for="{{group1}}" wx:key="*this">
<view class="main-item">
<view class="group-name">{{item.name}}</view>
<view class="country {{select1 == country.id ? "active" : ""}}" wx:key="*this" wx:for="{{item.country}}" wx:for-item="country" bindtap="selectCountry1" data-id="{{country.id}}">
<image src="{{country.icon}}" class="country-icon"></image>
<text>{{country.countryName}}</text>
<view class="border" data-status="border"></view>
</view>
</view>
</block>this is the code for wxml, because the group name above is also a loop. So a loop is nested.
.main-item{
margin-left: 3%;
margin-bottom: 3%;
width: 45%;
color: -sharpfff;
box-sizing: border-box;
}
.group-name{
padding-left: 15rpx;
height: 45rpx;
background: -sharp404c57;
font-size: 30rpx;
line-height: 45rpx;
}
.country{
position: relative;
padding: 15rpx;
background: rgb(51, 67, 70);
border-bottom: 1px solid -sharp241323;
font-size: 30rpx;
}
.country-icon{
margin-right: 15rpx;
width: 50rpx;
height: 35rpx;
vertical-align: middle;
}
.border{
position: absolute;
right: 15rpx;
top: 18rpx;
width: 35rpx;
height: 35rpx;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
} I don"t know how to click on an item and ask it to change its style, such as changing the background color. Click again and change back.
then by default none of the items are selected when you first enter the page.
not long after I got in touch with Mini Program, did I have a boss to fly with me? no, no, no. Thank you.