E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现瀑布流

E企盈直播平台营销卖货系统

CSS3 多列实现column-count  定义几列column-gap   列间距  wxml的布局  view class=’content’  block wx:for=”{{dataArray}}” wx:key=””     template is=”item” data=”{{…item}}”/template  /block  /viewtemplate name=”item”  view class=’item’    image class=”image” src=”{{url+’?imageView2/0/w/500′}}”  data-src=”{{url}}” bindtap=”previewImage” mode=”widthFix”/image    view class=’item-text-view’        text class=’time-text'{{who}}/text    /view  /view/template样式代码wxss.image {  width: 100%;   margin:0 auto;}.time-text{  font-size: 14px;  color: #fff;}.item-text-view{  background: #000000;  height: 30px;  position: relative;  margin-top: -35px;  display: block;  opacity: 0.6}.content{  margin: 0.5%;  column-count: 2;  column-gap: 0px;}.item{  width: 98%;  height: auto;  text-align: center;  margin-left:  0.5%;  margin-right: 0.5%;  margin-bottom: 0.5%;  display: inline-block;  border:1px solid #ccc;}这样就实现了瀑布流 。这样完了么 (如果你只有一页数据你可以无视后面的内容),你会发现如果是一个长列表数据。  随着数据不断添加 ,右边会出现闪烁,图片位置在不断的变化,显然这不是咱要的瀑布流。下来不要用css3的样式就分列了 我们自己手动去分列。和css3实现代码差不多  就是多了一些判断分列!wxml的布局  view class=’content’  view class=”item-view”    block wx:for=”{{dataArray}}” wx:key=””      template is=”item” data=”{{…item}}” wx:if=”{{index%2==0}}”/template    /block  /view  view class=”item-view”    block wx:for=”{{dataArray}}” wx:key=””      template is=”item” data=”{{…item}}” wx:if=”{{index%2==1}}”/template    /block  /view/view这个方法是网上找到的办法 微信小程序 瀑布流布局.image {  width: 100%;   margin:0 auto;}.time-text{  font-size: 14px;  color: #fff;}.item-text-view{  background: #000000;  height: 30px;  position: relative;  margin-top: -35px;  display: block;  opacity: 0.6}.content{  margin: 0.5%;}.item{  width: 98%;  height: auto;  text-align: center;  margin-left:  0.5%;  margin-right: 0.5%;  margin-bottom: 0.5%;  display: inline-block;  border:1px solid #ccc;}最重要的样式就是没列的宽度不超过50%要就到下面去了 就不是两列了。.item-view{   width: 50%;   float: left;}到这里就实现了瀑布流。css3实现的每个item的顺序其实都不是想要的,仔细看会发现的。接口来自: 干货集中营

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现瀑布流
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏