微信小程序: 简单的根据数字(次数)去循环view

在微信小程序中,通过wx:for以及固定的数字循环获取盒子

.wxml页面

<view class="bg-outer">
    <view class="bg-inner" wx:for="{{index}}" wx:key="index">
        123
    </view>
  </view>

.js页面

Page({
  data: {
    index: 81
  }
})

最终展示:

样式需要自己去设置 

.bg-outer {
  width: 90%;
  height: 50%;
  border: 1px solid rgb(50, 123, 206);
  z-index: 2;
  position: absolute;
  top: 15%;
  overflow: hidden;
}

.bg-inner {
  width: 10.5%;
  height: 10.5%;
  border: 1px solid rgb(50, 123, 206);
  float: left;
}

可以看见边框重叠的地方像素变宽,解决办法:

http://t.csdn.cn/KkTkT