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

不是村支书

已于 2022-08-26 14:08:00 修改

阅读量6.8k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序 xss

于 2022-08-26 14:06:09 首次发布

本文链接：https://blog.csdn.net/whyyouo/article/details/126542063

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用场景:微信小程序、注册协议动态下发多个，需要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}`,
    })
  },