发表日期:2019-10 文章编辑:小灯 浏览次数:905
新的设计图是按两列瀑布流排版的,类似于花瓣网那种。看到设计图后就在网上找,如何在小程序简单的实现,后来找到了一个特别简单的方法,就是利用wx:if
和数组的下标对2取余来判断是排在左列还是排在右列,
话不多说看图上代码:
wxml:
<view class='footlist'>
<view class="foot-left">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==0}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}} </text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤ </view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="foot-right">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==1}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}}</text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤</view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
js:
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
id: 174,
userid: 10,
title: "日本岚山、和服一日游",
banner: "https://hbimg.huabanimg.com/1ff95bdf3070e1fbff052a03ed353b409749f5ea16a809-WXy25b_fw658",
points: 6,
like: "62",
userinfo: {
id: 10,
nickName: "李诗源",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 173,
userid: 9,
title: "日本阿寒湖一日游",
banner: "https://hbimg.huabanimg.com/ee5bf07b84fead3d57b445d2e7fa8eb6afe827c617e9c-ha1fZH_fw658",
points: 7,
like: "92",
userinfo: {
id: 9,
nickName: "大飞狼",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 172,
userid: 8,
title: "二次璧大乱斗东京动漫游",
banner: "http://img1qn.moko.cc/2019-08-12/235e9bab-046e-4fea-afc2-4a049d81774e.jpg?imageView2/2/w/915/h/915/q/85",
points: 4,
like: "41",
userinfo: {
id: 8,
nickName: "黄飞鸿",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 100,
userid: 314,
title: "心和身体总要有一个在路上
本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/23635.html
日期:2019-11 浏览次数:4729
日期:2019-11 浏览次数:11151
日期:2019-11 浏览次数:3585
日期:2019-11 浏览次数:4501
日期:2019-11 浏览次数:4598
日期:2019-11 浏览次数:6254
日期:2019-11 浏览次数:4519
日期:2019-11 浏览次数:14968
日期:2019-11 浏览次数:3876
日期:2019-11 浏览次数:5631
日期:2019-11 浏览次数:4454
日期:2019-11 浏览次数:3803
日期:2019-11 浏览次数:9545
日期:2019-11 浏览次数:7461
日期:2019-11 浏览次数:4173
日期:2019-11 浏览次数:3572
日期:2019-11 浏览次数:8083
日期:2019-11 浏览次数:3825
日期:2019-11 浏览次数:3994
日期:2019-11 浏览次数:4060
日期:2019-11 浏览次数:3606
日期:2019-11 浏览次数:4219
日期:2019-11 浏览次数:9377
日期:2019-11 浏览次数:4411
日期:2019-11 浏览次数:4299
日期:2019-11 浏览次数:3907
日期:2019-11 浏览次数:11212
日期:2019-11 浏览次数:6522
日期:2019-11 浏览次数:6767
日期:2019-11 浏览次数:4126
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.