微信小程序循环，每行固定数目，自动换行

需求

根据后台传入或者前端生成的数据，每行固定显示N个，多出来的自动换行，在我的项目中需要的每行固定显示为2个。
Demo地址：git链接
如图所示：

思路

以每行固定两个，自动换行为例子。
先判断数据的条数，根据数据的条数去判断有几行，然后在行内展示两条，根据第几行，第几条来取数据是第几条。如果不能理解，请看代码。或者GIT查看

页面目录

其中WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
index.wxs文件内容

/*index.wxs
*获取行数，
*/
var filters = {toFix: function (value) {return parseInt(value);  //此处为获取整数，不进行四舍五入操作}
}
module.exports = {toFix: filters.toFix,
}

index.js文件内容

/*index.js
*获取数据
*/
Page({data: {listData:[{ 'text': '09.30~10.06' },{ 'text': '10.07~10.13' },{ 'text': '10.14~10.20' },{ 'text': '10.21~10.27' },{ 'text': '10.28~11.03' }]},onLoad: function () {},
})

index.wxml文件内容

<!--获取文件index.wxs文件的函数-->
<wxs module="filters" src="index.wxs"></wxs>
<!--判断有几行，根据行数目，第几行index参数赋值在i变量上-->
<block wx:for="{{listData.length%2?filters.toFix(listData.length/2)+1:listData.length/2}}" wx:for-index="i" wx:for-key="{{i}}" wx:key="i"><view class="demo-row"><!--每行循序2次，index参数赋值在j变量上--><block wx:for="{{2}}" wx:for-index="j" wx:for-item="item_j" wx:for-key="key_j" wx:key="j"><!--此时数据的条数为i*2+j行数*2+第几行--><block wx:if="{{listData[i*2+j].text}}"><view class="demo-item"><view class="screen-data" data-index="{{i*2+j}}">{{listData[i*2+j].text}}</view></view></block></block></view>
</block>

index.wxss文件内容

<!--获取文件index.wxs文件的函数-->
.demo-row{display: flex;justify-content:flex-start;
}
.demo-item{margin-top: 24rpx;width: 50%;
}
.demo-item .screen-data{margin: 12rpx;padding: 12rpx;text-align: center;border:1px solid #ccc;border-radius: 8rpx;
}

微信小程序循环，每行固定数目，自动换行相关推荐

php 微信小程序循环多选,微信小程序循环及嵌套循环的使用
这篇文章主要介绍了微信小程序循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下微信小程序循环及嵌套循环的使用总结关于微信小程序,最近被安排做微信小程序,首次接触 ...
微信小程序foreach遍历_详解微信小程序循环及嵌套循环
本文主要介绍微信小程序循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中 ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了
微信小程序循环 wxfor、wxfor-item(s)区别与联系、data-xxx、wx-key使用
微信小程序循环 wx:for.wx:for-item(s)区别与联系.data-xxx .wx-key使用 wx:for.wx:for-items.wx:for-item的区别和联系小程序的列表视图 ...
微信小程序循环出来的内容设置不同的样式
微信小程序循环出来的内容设置不同的样式循环出来的内容可以通过判断下标的方式添加想要的class样式或者style,例如: 设置类名 class="img {{index===1?'chan ...
微信小程序循环列表添加动画animation
微信小程序内的css无法做到循环的动态 animationData变成[],数组里很多{}对象,就可以改变单独的值. WXML: <view class="context-full&q ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
微信小程序文字下标_微信小程序循环下标微信小程序怎么做
微信小程序,多层数组,获取下标为Nan如何解决? 应该把Print a(i)放在Next i前面. 即生成一个随机数,就打印.循环执行. 放在后面的话应为执行了next,所以i = 6了,超出了a数组 ...
微信小程序循环赋值坑（转）
原文:https://blog.csdn.net/d7185540/article/details/71438328 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器 ...
微信小程序循环显示多个Echarts图表，动态渲染数据
需求:需要在微信小程序中循环显示多个Echarts图表,动态渲染Echarts数据. 经查询,选择使用echarts插件. 在echarts官网中获取ec-canvas组件,放入至微信小程序中 1.w ...

微信小程序循环，每行固定数目，自动换行

需求

思路

页面目录

微信小程序循环，每行固定数目，自动换行相关推荐

最新文章

热门文章