微信小程序如何循环控制一行显示几个wx:for

正如上图所显示的一样，我们改如何控制一行显示几个图形呢？
首先第一种方法，数量少的可以自己一行一行的写，但是当数据很多的时候呢？
这时候就需要我们区使用循环进行代码的编写。废话不多数，直接写代码。

.demo-item{
width: 40%;
}
.demo-item .screen-data{
padding: 10rpx;
text-align: center;
}

json文件

{
“navigationStyle”: “custom”,
“navigationBarTextStyle”: “white”,
“usingComponents”: {
“tabchange”: “/components/tabchange/index”,
“search-bar”: “/base-ui/ms-search-bar/index”,
“ms-add-btn”: “/base-ui/ms-add-btn/index”,
“van-tab”: “@vant/weapp/tab/index”,
“van-tabs”: “@vant/weapp/tabs/index”,
“ms-main-navbar”: “/base-ui/ms-main-navbar/index”,
“van-sticky”: “@vant/weapp/sticky/index”,
“van-icon”: “@vant/weapp/icon/index”,
“form-item”: “/components/form-item/index”,
“van-popup”: “@vant/weapp/popup/index”,
“ms-button”: “/base-ui/ms-button/index”
}
}

js文件

 /*** 页面的初始数据*/data: {Authorization: "",taskDetailParams: {"currentPage": 1,"filters": {"status": ""},"orderBys": [],"pageSize": 10},// navigationBarAndStatusBarHeight: 0,dataitem: {name: "数据",faren: "王五"},active: 0,totalCount: 0,tabs: ['全部', '入库', '出库'],tabIndex: 0,//状态栏高度statusBarHeight: Cache.getCacheSync(STATUSBARHEIGHT),//导航栏高度navigationBarHeight: Cache.getCacheSync(MENUBUTTONHEIGHT),//胶囊按钮的高度menuButtonHeight: Cache.getCacheSync(NAVIGATIONBARHEIGHT),//状态栏加导航栏高度navigationBarAndStatusBarHeight: Cache.getCacheSync(NAVIGATIONBARANDSTATUSBARHEIGHT),SAFEBOTTOM: Cache.getCacheSync(SAFEBOTTOM),filter:false,changecolor:[{name:'借入',changecolor:false},{name:'借出归还',changecolor:false},{name:'来料加工',changecolor:false},{name:'借出归还',changecolor:false},{name:'借出',changecolor:false},{name:'退料',changecolor:false},]},onClose(){this.setData({filter:false})},changecolor(e){console.log(e,1)let sum=parseInt(e.currentTarget.dataset.item)console.log(typeof(sum))console.log(this.data.changecolor[sum].changecolor)this.data.changecolor.map((i,index)=>{console.log(i)this.setData({['changecolor['+index+'].changecolor']:false})})this.setData({['changecolor['+sum+'].changecolor']:true})console.log(this.data.changecolor)},queren(){this.setData({filter:false})},cancel(){this.setData({filter:false})},filter(){this.setData({filter:true})},

<van-popup show="{{ filter }}" position="right" custom-style="height: 100%; width:60%;padding-top:{{navigationBarAndStatusBarHeight+50}}px;" bind:close="onClose" catchtouchmove='ture'><view><view class="margin-left-10 margin-top-10 font-size-14" style="font-weight: 700;">业务类型</view><!-- <view wx:for="{{changecolor}}"><view class="flex jc-around margin-top-10"><view class="padding-10 font-size-14" style="background-color:{{changecolor[index].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[index].changecolor?'white':'black'}};" bindtap="changecolor" data-item="{{index}}">{{changecolor[index].name}}</view></view><view class="flex jc-around margin-top-10"><view class="padding-10 font-size-14" style="background-color: #F2F2F2;" bindtap="changecolor"style="background-color:{{changecolor[2].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[2].changecolor?'white':'black'}};" bindtap="changecolor" data-item="2">现款合同</view><view class="padding-10 font-size-14" style="background-color: #F2F2F2;" bindtap="changecolor"style="background-color:{{changecolor[3].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[3].changecolor?'white':'black'}};"bindtap="changecolor" data-item="3">来料合同</view></view></view> --><block wx:for="{{changecolor.length/2}}" wx:for-index="i" wx:for-key="{{i}}" wx:key="i"><view class="flex jc-around margin-top-10"><!--每行循序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="{{changecolor[i*2+j].name}}"><view class="demo-item"><view class="screen-data font-size-14" data-item="{{i*2+j}}" style="background-color:{{changecolor[i*2+j].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[i*2+j].changecolor?'white':'black'}};"bindtap="changecolor">{{changecolor[i*2+j].name}}</view></view></block></block></view></block></view><view class="margin-top-10"><view class="margin-left-10 font-size-14" style="font-weight: 700;">供应原材料</view><view class="flex jc-between grey padding-left-10 padding-top-5 padding-bottom-5 padding-right-5 margin-top-10" style="background-color: #F2F2F2;"><view>请选择</view><van-icon name="arrow" /></view></view><view class="margin-top-10"><view class="margin-left-10 font-size-14" style="font-weight: 700;">储料仓</view><view class="flex jc-between grey padding-left-10 padding-top-5 padding-bottom-5 padding-right-5 margin-top-10" style="background-color: #F2F2F2;"><view>请选择</view><van-icon name="arrow" /></view></view><view class="flex jc-between" style="position: fixed; width: 100%; bottom: 0; padding-bottom:{{SAFEBOTTOM}}px;"><ms-button buttonType="ms-grey" class="margin-left-5" bindtap="cancel">取消</ms-button><ms-button buttonType="ms-green" class="margin-right-5" bindtap="queren">确认</ms-button></view>
</van-popup>

其中控制循环的代码就是下面这一部分

<block wx:for="{{changecolor.length/2}}" wx:for-index="i" wx:for-key="{{i}}" wx:key="i"><view class="flex jc-around margin-top-10"><!--每行循序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="{{changecolor[i*2+j].name}}"><view class="demo-item"><view class="screen-data font-size-14" data-item="{{i*2+j}}" style="background-color:{{changecolor[i*2+j].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[i*2+j].changecolor?'white':'black'}};"bindtap="changecolor">{{changecolor[i*2+j].name}}</view></view></block></block></view></block>

微信小程序如何循环控制一行显示几个wx:for相关推荐

java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序苹果手机边框1rpx显示不全解决办法
微信小程序苹果手机边框1rpx显示不全,加上transform: rotateZ(360deg) .address-map{width: 125rpx;height: 36rpx;line-heigh ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序输入框会字体显示不全或者换行
微信小程序输入框会字体显示不全或者换行问题描述有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全解决方案用开发者工具调试发现,input,textarea 有默认的 ...
微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
新手前端微信小程序img图片无法显示问题
最近自己在做毕设,是一个微信小程序,虽然自己有一点前端开发经验,以为小程序前端和这个差不多可以直接开撸,但是这两天被一些图片问题烦了好久. 这也是自己第一次写博客,实在太生气了,网上也没找到自己想要的 ...
微信小程序的的图片显示不出来
图片的路径分两种 1.本地的图片如images文件夹下面的 /images/t1.jpg 或者是http://localhost:8080/Teacher/news/t1.jpg 2.网络连接的 ...
微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...

微信小程序如何循环控制一行显示几个wx:for

微信小程序如何循环控制一行显示几个wx:for相关推荐

最新文章

热门文章