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

原创已于 2022-08-26 14:08:00 修改 · 7.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #xss

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

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

1 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现注册协议自动换行及点击跳转的方法。通过XML布局代码实现了view自动换行，并结合WXSS样式进行美化。提供了协议列表点击跳转到详情页面的功能。

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