使用场景:微信小程序、注册协议动态下发多个,需要view自动换行,同时点击跳转协议内容场景需求
1.效果图.
2.xml界面代码
<!-- view自动换行 -->
<view class="agreement" wx:if="{{agreementListInfos.length > 0}}">
<label class="radio-buttom">
<van-checkbox value="{{isAgree}}" icon-size="30rpx" bind:change="onChange"> </van-checkbox>
<view class="gray-txt" bindtap="onChangeTig">我已阅读并同意</view>
</label>
<view wx:for="{{agreementListInfos}}" wx:key="index" bindtap="linkDetail" data-item="{{item}}" data-index="{{index}}">
<view class="link-txt2">{{'《'+item.agreementName+'》'}} </view>
</view>
</view>
3. wxss样式代码
.agreement {
display: flex;
flex-direction: row;
padding-left: 30rpx;
flex-wrap: wrap;
align-content: space-around;
}
.agreement view {
display: inline;
}
.radio-buttom {
display: flex;
padding-top: 10rpx;
padding-left: 10rpx;
}
.gray-txt {
font-size: 24rpx;
font-weight: 400;
color: #999999;
margin-left: 8rpx;
}
.link-txt2 {
font-size: 24rpx;
font-weight: 400;
color: #0182FF;
margin-left: 1rpx;
}
4.js点击协议界面跳转
//点击协议链接跳转listview
linkDetail(e) {
debugger
var itemInfo = app.getElementData(e, 'item')
var titleName = itemInfo.agreementName
var tempUrl = encodeURIComponent(itemInfo.agreementUrl)
wx.navigateTo({
url: `/pages/webView/index?url=${tempUrl}&title=${titleName}`,
})
},