微信小程序view控件自动换行-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序view控件自动换行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用场景:微信小程序、注册协议动态下发多个，需要view自动换行，同时点击跳转协议内容场景需求

1.效果图.

微信小程序view控件自动换行

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点击协议界面跳转文章来源地址https://www.toymoban.com/news/detail-514082.html

  //点击协议链接跳转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}`,
    })
  },

到了这里，关于微信小程序view控件自动换行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！