文档章节

小程序实现瀑布流

veidy
 veidy
发布于 2017/09/04 15:52
字数 598
阅读 837
收藏 0

​最近折腾了一款小程序,之前没有js开发经验,所以小程序的开发也是边看文档边查资料,现学现卖。

今天分享的内容也是现学现卖,如果对小程序开发感兴趣的童鞋可以先收藏,说不定用得着。先看一下效果:

是的,瀑布流! 做为一个app开发的猿,在开发小程序时,想处理列表数据第一个脑子里面反射出来的就是Listview? Tabview ?瀑布流 用RecyclerView?把小程序api文档查了个遍也没看到这样的组件。但是发现了一个词"列表渲染"

wx:for

瀑布流是一个列表数据,既然列表数据解决了那就可以定实现的思路了,我来说一下我的思路: 直接两个列表并排不就好了?。。。一个字,干! 上wxml代码(视图层布局代码):

<view class="item-body"> 
    <view class="body-left" >
        <image  wx:for="{{left_array}}" wx:key="id"  class='img_item' src=" {{item.img_url_thumb}}" mode='widthFix' bindtap='tap_left_img'
    data-poster="{{item}}"></image>
    </view>

    <view class="body-right">
        <image  wx:for="{{right_array}}" wx:key="id"  class='img_item' src="{{item.img_url_thumb}}"  mode='widthFix' bindtap='tap_right_img'
data-poster="{{item}}"></image>
    </view>

</view>

小程序里面视图容器是View这个控件,如上代码 最外层一个**<View/>** item-body,里面两个**<View/>** body-left 和 body-right,然后两个View里面都各有一个显示图片的组件**<Image/>**img_item。接下来就是写CSS样式啦~

.wxss文件 里面是配置css样式。

先看item-body

.item-body{
width:100%;
height:100vh;

/*弹性布局*/
display:flex;
/*横向布局*/
flex-direction:row;

margin-top: 10px;
background-color: white;
padding-top: 5px;
}

最重要的就是:

/*弹性布局*/
display:flex;
/*横向布局*/
flex-direction:row;

然后再看 body-left 和 body-right

/*单列图片*/
.body-left{

text-align:center;
flex:1;
padding-left: 5px;
/* padding-top: 5px; */
padding-bottom: 5px;
/* background-color: #000; */
}
.body-right{

text-align:center;
flex:1;
/* background-color: #000; */
padding-right: 5px;
/* padding-top: 5px; */
padding-bottom: 5px;

}

最重要的是:

flex:1;

css文档上对flex的解释: 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容 是不是可以理解为android里面的权重呢?平均分,暂且就这么理解吧~两个子view都设置1就等分了~

最后就img_item:

.img_item {
width:95%;
vertical-align: top;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

最后就轮到JS代码了: js代码直接在data里面定义两个array就好啦 left_array:[] , right_array[]

最后贴上本本海报的二维码,欢迎体验~


                                        欢迎关注我的公众号!

输入图片说明

© 著作权归作者所有

veidy

veidy

粉丝 131
博文 47
码字总数 18684
作品 0
深圳
技术主管
私信 提问
小程序之图片瀑布流(最全实现方式,额外加送懒加载)

效果图 来来来,看啊看,外面的世界多好看, 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是这样的格式,我们需要改...

小心夹手
2018/05/11
0
0
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
惟忆代码/picfixed

picfixed 是一个等高且等宽瀑布流,可以让图片或者div轻松实现等高等宽瀑布流(这里的等宽是指行等宽) #插件特点: 等高 - 同行的所有元素等高 等宽 - 所有行的总体宽度相等 等比缩放 - 所有图片...

惟忆代码
2016/04/29
0
0
响应式布局页面之瀑布流布局浅析

瀑布流式布局(简称瀑布流)最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网等页面都采用了这种布局。那么什么是瀑布流呢?瀑布流的好处在哪? 瀑布流...

H_J
2014/03/14
1K
0
iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一...

Daniel_s
2015/12/09
105
0

没有更多内容

加载失败,请刷新页面

加载更多

云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

大涛学弟
16分钟前
4
0
TL138/1808/6748-EasyEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EasyEVM是广州创龙基于SOM-TL138/SOM-TL1808/SOM-TL6748核心板开发的一款开发板。由于SOM-TL138/SOM-TL1808/SOM-TL6748核心板管脚兼容,所以此三个核心板共用同一个底板。开...

Tronlong创龙
21分钟前
3
0
开普勒平台开源版

https://github.com/kplcloud/kplcloud

perofu
24分钟前
4
0
昨天,这项阿里技术再获世界级科技大奖!

第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光。 昨天,阿里云自研数据库POLARDB 在会上当选世界互联网领先科技成果。POLARDB解决了企业在云时代的数据库难题,帮助企...

阿里云官方博客
24分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部