使用場(chǎng)景:微信小程序、注冊(cè)協(xié)議動(dòng)態(tài)下發(fā)多個(gè)，需要view自動(dòng)換行，同時(shí)點(diǎn)擊跳轉(zhuǎn)協(xié)議內(nèi)容場(chǎng)景需求
1.效果圖.
?
?2.xml界面代碼
<!-- view自動(dòng)換行 -->
<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樣式代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-514082.html
.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點(diǎn)擊協(xié)議界面跳轉(zhuǎn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514082.html
//點(diǎn)擊協(xié)議鏈接跳轉(zhuǎn)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}`,
})
},到了這里，關(guān)于微信小程序view控件自動(dòng)換行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
