微信小程序中如何制作瀑布流效果

微信小程序中如何制作瀑布流效果如图是

首先，页面布局，页面分为两个部分，左右各一部分，各自插入图片，页面代码如下：

<view class="city_history"><view class="history_content"><scroll-view scroll-y="true"  style="height: {{ windowHeight }}px; width: {{ windowWidth }}px;" bindscrolltolower="loadMore" ><view class="left"><view wx:for="{{trips}}" wx:for-item="item" wx:key="" ><template is="m-history"  wx:if="{{index%2==0}}" data="{{ trip : item}}" />            </view>      </view><view class="right"><view wx:for="{{trips}}" wx:for-item="item" wx:key=""><template is="m-history"  wx:if="{{index%2==1}}" data="{{ trip : item}}" /></view></view></scroll-view></view>
</view>

样式代码如下：
/index.wxss/

.city_history{margin-top:10px;padding-top:5px;border-top:1px #dadada solid;
}
.history_content{clear:both;overflow: hidden;width:100%;
}
.history_content .left,.history_content .right{width:49%;
}
.history_content .left{float:left;
}
.history_content .right{float:right;
}
.history_item{display: inline-block;background:#fff;margin-bottom: 20px;border-radius: 10px;width:100%;
}
.item-img{width:100%;border-radius: 10px 10px 0 0 ;
}
.item-title{padding:10px;font-size: 14px;font-family: 'PingFang SC-Medium';color: #1e1e1e;
}
.item-ava{width: 35px;height: 35px;border-radius: 100%;float:left;margin-right:10px;
}
.history_auth_name{padding:0 0 10px 10px;
}
.name-title{font-size:12px;font-family: 'PingFang SC-Medium';color: #1e1e1e;display: block;
}

外部的components代码如下：

conponents/history.wxml

<image class="item-img" src="{{trip.cover_image}}" mode="widthFix"></image><view class="item-title-box"><view url="url" class="item-title">{{trip.name}}</view></view><view class="history_auth_name"><image class="item-ava" src="{{trip.cover_image_default}}"></image>   <text class="name-title">{{trip.desc}}</text><text class="name-title">2018-12-1</text></view>

以上就是部分瀑布流的代码整个具体的文件可以上我的github下载瀑布流demo地址

微信小程序中如何制作瀑布流效果相关推荐

在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
微信小程序实现简单的瀑布流式布局
参考原文:https://blog.csdn.net/weixin_39661129/article/details/110935903 实现样式: 分析:应为小程序只有左右两列,完全没有H5动态计算 ...
微信小程序简单实现图片瀑布流
简单实现图片瀑布流 <view class="container"><view class="box" wx:for='{{show}}' w ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
图灵机器人 mysql_如何在微信小程序中制作图灵机器人？
本教程讲解了如何在微信小程序中制作图灵机器人?操作起来是很简单的,想要学习的朋友们可以跟着小编一起去看一看下文,希望能够帮助到大家. 开发环境及框架后端:国产java极速框架JFinal(超级好用有 ...
微信小程序中下载app的方法
微信小程序中下载app的方法因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...

微信小程序中如何制作瀑布流效果

微信小程序中如何制作瀑布流效果如图是

微信小程序中如何制作瀑布流效果相关推荐

最新文章

热门文章