微信小程序实现瀑布流仿小红书

要做的小红书瀑布流效果

homepage.wxml代码

<!-- 瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据wx:if="{{index%2==1}}" 这里，用if来辨别是奇数还是偶数，两边加载相反的 --><view class="content"><view class="left"><block wx:for="{{noramalData.tuijain}}" wx:key="index" wx:for-item="tuijain"><template is="{{msg1}}" data="{{tuijain}}" wx:if="{{index%2==0}}"></template></block></view><view class="right"><block wx:for="{{noramalData.tuijain}}" wx:key="index" wx:for-item="tuijain"><template is="{{msg1}}" data="{{tuijain}}" wx:if="{{index%2==1}}"></template></block></view></view>

homepage.js代码

Page({data: {item:{},msg1:'1',noramalData: []},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {const db= wx.cloud.database();db.collection('homepage').where({name:'tuijain'}).get({success: (res)=>{// res.data 是包含以上定义的两条记录的数组console.log(res.data);console.log(this);this.setData({noramalData:res.data[0]})console.log(res.data[0]);this.setData({item:{}})}})},
})

homepage.wxss代码

/* 引入模块的wxss */
@import "../../templates/tuijian/tuijian.wxss";

模块tuijian.wxml代码

<template name="1"><view class="item"><view class="li"><image class="pic" src="{{tuijain.Cover}}" mode="widthFix"></image><view class="title-wrap"><navigator url="url" class="title">{{tuijain.title}}</navigator></view><view class="bottom"><view class="toux-name"><image class="toux" src="{{tuijain.tx}}"></image><text class="name">{{tuijain.name}}</text></view><view class="love-num"><text class="love">{{tuijain.love}}</text><text class="num">{{tuijain.num}}</text></view></view></view></view>
</template>

模块tuijian.wxss代码

page{width: 100%;margin: 0;background: #F2F2F2;
}
.content{display: flex;flex-direction: row;margin: 20rpx;overflow: hidden;
}.left{width: 345rpx;
}.right{width: 345rpx;margin-left: 20rpx;
}
.li{background: #ffffff;border-radius: 10rpx;
}
.pic{border-radius: 10rpx 10rpx 0rpx 0rpx;width: 345rpx;
}.bottom{display: flex;justify-content: space-between;padding: 0 20rpx;align-items: center;
}
.title-wrap{padding: 5rpx 20rpx 0rpx 20rpx;font-size: 30rpx;font-weight: 600;color: #333;
}
.toux{width: 60rpx;height: 60rpx;border-radius: 30rpx;
}
.name{font-size: 25rpx;color: #333;font-weight: 300;margin-left: 20rpx;
}
.toux-name{display: flex;align-items: center;margin: 20rpx 0rpx;
}
.love-num{color: #333;display: flex;align-items: center;
}
.num{font-size: 25rpx;margin-left: 5rpx;
}

完成啦，做出来的效果是这样的

瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据，wx:if="{{index%2==1}}" 这里，用if来辨别是奇数还是偶数，两边加载相反的

微信小程序实现瀑布流仿小红书相关推荐

微信小程序实现瀑布流实例
瀑布流的效果图如下: 1.wxml中的代码如下  <view class="containers&qu ...
关于微信小程序简单瀑布流的制作
应业务需要,制作了简单的瀑布流,应用于购物平台. 首先是单个内容组件.考虑到后台计算的消耗,因而将内容里的图片高度采用直接输入.到时传入数据时需注意. <!--components/showit ...
微信小程序实现瀑布流，如何实现！
废话不多,不爱表达,直接上代码! 首先,瀑布流样式都知道左右高度是不一样的,所以需要我们写两套样式,左边和右边. <view class='left'><block wx:for=& ...
微信小程序实现瀑布流（FlowLayout）效果
前言:小程序不同于安卓直接提供布局的配置,而必须要像写前端页面一样来写.并且小程序没有像web网页的DOM和BOM操作,准确的来说是存在这么个API的,但是我测试使用的时候,得到的数据总是不尽人意,地 ...
微信小程序实现瀑布流布局
微信小程序实现瀑布流布局实现的效果图如下显示: 一,需求分析布局分为两列,两列的高度随着图片的插入而改变默认给左右两列插入一张图片,插入图片后,根据两列的的高度做为判断依据,依次给高度更低的一列 ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
微信小程序推流拉流live-pusher/live-player示例，使用本地搭建RTMP服务
适用读者: 对微信小程序已经有基本的了解. 例如:小程序账号申请. 常用组件.小程序开发工具对nodejs已经有基本的了解. 对微信小程序流媒体/实时音视频组件感兴趣的童鞋. 对小鱼易联/小鱼在家, ...
《微信小程序案例5》仿小米Lite小程序分类板块-两个纵向滚动区域独立互不影响
一.小米Lite分类板块图二.技术分解 1.布局是分为左右两个纵向滚动区域,使用 <scroll-view> 2.每个小菜单的如图片标题等内容使用js里面的data来保存 3.如此 ...
android 支付数字键盘,微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘...
(此图片来源于网络,如有侵权,请联系删除! ) 前几天有开发过一个html5仿支付宝.微信支付数字键盘,在某些特定场景下自定义数字键盘应用还是蛮广泛的,比如小程序商城系统需要零钱支付 ,会员卡支付 ...

微信小程序实现瀑布流仿小红书

要做的小红书瀑布流效果

homepage.wxml代码

homepage.js代码

homepage.wxss代码

模块tuijian.wxml代码

模块tuijian.wxss代码

完成啦，做出来的效果是这样的

瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据，wx:if="{{index%2==1}}" 这里，用if来辨别是奇数还是偶数，两边加载相反的

微信小程序实现瀑布流仿小红书相关推荐

最新文章

热门文章

微信小程序实现瀑布流 仿小红书

要做的小红书瀑布流效果

homepage.wxml代码

homepage.js代码

homepage.wxss代码

模块tuijian.wxml代码

模块tuijian.wxss代码

完成啦，做出来的效果是这样的

瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据，wx:if="{{index%2==1}}" 这里，用if来辨别是奇数还是偶数，两边加载相反的

微信小程序实现瀑布流 仿小红书相关推荐

最新文章

热门文章

微信小程序实现瀑布流仿小红书

微信小程序实现瀑布流仿小红书相关推荐