微信小程序换行显示指定行数据量

方式1 在wxml进行数据的判断展示

=====page.js 文件Page({data:{testArr:['a0','a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11']}})
=====page.wxml<view><block wx:for="{{testArr}}"><view wx:if="{{index % 3 == 0}}" style="display: flex;"><!-- {{item}} --><block wx:for="{{testArr}}" wx:for-item="item2" wx:for-index="index2"><view wx:if="{{index2 >= index &&  index2 < index +3 }}">{{item2}}</view></block></view></block></view>

方式2 主要为js文件中封装数据

=====page.js 文件在这里对数组进行拆分封装为data:{testArr:[['a0','a1','a2'],['a3','a4','a5'],['a6','a7','a8'],['a9','a10','a11']]}
=====page.wxml<view><block wx:for="{{testArr}}"><view style="display: flex;"><!-- {{item}} --><block wx:for="{{item}}" wx:for-item="item2" wx:for-index="index2"><view >{{item2}}</view></block></view></block></view>

方式3 当只需要对文本进行间隔换行时

=====page.js 文件Page({data:{testArr:['a0','a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11']}})
=====page.wxml<view><block wx:for="{{testArr}}"><text>{{item}}</text><view wx:if="{{index % 3 == 0}}"></view>  </block></view>

微信小程序换行显示指定行数据量相关推荐

微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
ESP8266读DHT11温湿度，开发微信小程序实时显示
ESP8266读DHT11温湿度,开发微信小程序实时显示第一.原理讲解第二.ESP8266读取DHT11 第三.温湿度推送到云端第四.微信小程序开发个人可免费注册五个微信小程序账号. 第一.原 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
小程序js中data获取服务器数据,微信小程序获取javascript 里的数据
微信小程序获取javascript 里的数据 wxml如何获取js里的数据例: wxml里: {{txt}} 通过上面的{{txt}}可以对应获取js里data下定义的txt的值 js里: dat ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...

微信小程序换行显示指定行数据量

微信小程序换行显示指定行数据量

方式1 在wxml进行数据的判断展示

方式2 主要为js文件中封装数据

方式3 当只需要对文本进行间隔换行时

微信小程序换行显示指定行数据量相关推荐

最新文章

热门文章

微信小程序 换行显示指定行数据量

微信小程序 换行显示指定行数据量

方式1 在wxml进行数据的判断展示

方式2 主要为js文件中封装数据

方式3 当只需要对文本进行间隔换行时

微信小程序 换行显示指定行数据量相关推荐

最新文章

热门文章

微信小程序换行显示指定行数据量

微信小程序换行显示指定行数据量

微信小程序换行显示指定行数据量相关推荐