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

使用场景:微信小程序、注册协议动态下发多个，需要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点击协议界面跳转

  //点击协议链接跳转listviewlinkDetail(e) {debuggervar itemInfo = app.getElementData(e, 'item')var titleName = itemInfo.agreementNamevar tempUrl = encodeURIComponent(itemInfo.agreementUrl)wx.navigateTo({url: `/pages/webView/index?url=${tempUrl}&title=${titleName}`,})},

微信小程序view控件自动换行相关推荐

微信小程序地图控件Map的使用
本文介绍微信小程序map控件的使用 map为原生控件之一-- 介绍完map控件之后下面直接来看代码怎么实现吧和往常一样,这些代码贴过去就可以直接通用的首先wxml文件(极简): <map i ...
微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序视图控件与bindtap之间的问题的解决
在微信小程序中最常用的<view>控件可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType=&qu ...
【delphi】开发微信小程序后台控件（一）（含源代码、演示程序、控件使用帮助）
1. 前言微信小程序已经非常普及,但是遗憾的是官方提供的 SDK 等没有Delphi语言的,这样使用Delphi语言开发微信小程序后台就相对比较困难,需要研究平台API,费时费力,特别是调试API很 ...
微信小程序text控件部分字体文字大小和颜色设置四
在我们android中有的时候会要求textview控件显示文字部分颜色不同而且大小也不同,这个在微信小程序中怎么做呢?因为在微信小程序中所有的显示都是通过标签来实现的,那么标签时可以嵌套的,比如显示 ...
【delphi】开发微信小程序后台控件（三）（含源代码、演示程序、控件使用帮助）
7. 微信小程序控件测试 7.1 设置参数选择[公共功能]-[编辑控件属性]菜单,设置相关参数并保存 7.2 双击绿色运行按键或者启动小程序功能菜单至此,小程序后台服务已经成功启动,可以在前端 ...
微信小程序按钮控件设置呈现效果
1.效果图在小程序中完成上述布局,需要设置四个按钮位置,控制每个按钮大小.设置按钮背景颜色,设置标题和图标的位置. 2.代码说明 2.1 index.wxml <view class=&quo ...
小程序背景图片从服务器获取,微信小程序button控件去边框、加背景图
button边框去除相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题.例如button的边框无法去除,在为button设置圆角的时候周围会有一些"杂质" ...
微信小程序view动态长度_微信小程序关于控件尺寸动态计算的问题
自定义相机界面,顶部80rpx,底部210rpx,中间剩余高度填充相机视频流view. 实现思路是获取屏幕高度,减去顶部80rpx再减去底部210rpx,结果赋值给相机视频流view的高度.这个高度需 ...

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

微信小程序view控件自动换行相关推荐

最新文章

热门文章