微信小程序瀑布流布局

这篇具有很好参考价值的文章主要介绍了微信小程序瀑布流布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序瀑布流布局,微信小程序,notepad++,小程序文章来源地址https://www.toymoban.com/news/detail-733680.html

<template>
	<view id="max_box">
		<view  class="page-main">
		  <view class="card">
		      <view class="coloum1" >
		        <view class="card-item" v-for="(item,index) in cardList1" :key="item.id" :style="[{background: item.color}]">
		            <image class="itemImg" :src="item.f_image" mode="widthFix"></image>
					<view class="item_text" >{{item.f_id}}</view>
		        </view>
		      </view>
		      <view class="coloum2">
		         <view class="card-item" v-for="(item,index) in cardList2" :key="item.id" :style="[{background: item.color}]">
		            <image class="itemImg" :src="item.f_image" mode="widthFix"></image>
					<view class="item_text" >{{item.f_id}}</view>
		        </view>
		      </view>
		  </view>
		</view>
	</view>
</template>

<script>
	// 获取系统信息
	const systemInfo = wx.getSystemInfoSync();
	// 获取屏幕宽度
	const screenWidth = systemInfo.screenWidth;
	import store from '@/store/index.js'
	const myrpx = store.state.myrpx
	import http from '@/util/http.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				num: '0',
				cardList:[
				],
				leftHeight:0,//左侧列表累计高度
				rightHeight:0,//右侧列表累计高度
				commonHeigt:100, //瀑布流卡片 除图片外的固有高度
				cardList1:[],//左侧列表渲染数据
				cardList2:[],//右侧列表渲染数据
			}
		},
		async onLoad() {
			this.getPublishedforum()
			
		},
		methods: {
			init(){
				//初始化两侧累计高度、两侧表数据
				//重新通过接口获取数据
				this.leftHeight = 0
				this.rightHeight = 0
				//获取图片宽高比
				this.cardList = this.cardList.filter((item,index)=>{
					//获取图片宽高比
					uni.getImageInfo({
					  src: item.f_image,
					  success: res => {
					    // 计算宽高比
					    const ratio = res.width / res.height
						//图片真实高度= 真实宽度 / 宽高比  myrpx当前机型 px换算成rpx此处省略
						item.trueHeight = (screenWidth * myrpx * 0.48) / ratio
						if(this.leftHeight <= this.rightHeight){ //如果右侧列大于左侧列的总高度  则添加左边
							this.cardList1.push(item)
							this.leftHeight =this.leftHeight + item.trueHeight + this.commonHeigt
						}else{
							this.cardList2.push(item)
							this.rightHeight =this.rightHeight + item.trueHeight + this.commonHeigt
							
						}
					  } 
					})
					return item
				})
			},
			// 获取发布的帖子数据
			getPublishedforum() {
				http('/getPublishedpost', 'POST', 
					{ 
					  start:0,
					  count:10
					},
				)
				.then((res) => {
						this.cardList = res[1].data
						this.init()
					})
			},
		}
	}
</script>

<style lang="less">
		.page-main{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			.card{
				display: grid;
				grid-template-columns: repeat(2,1fr);
				grid-gap: 10px; /* 列之间和行之间的间隙 */
			}
			.card-item{
				width: 400rpx;
				image{
					width: 100%;
				}
				margin-bottom: 10rpx;
			}
			.item_text{
				width: 100%;
				height: 100rpx;
				background-color: skyblue;
				z-index: 999;
			}
		}
</style>

到了这里,关于微信小程序瀑布流布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序瀑布流组件

    1.创建文件夹    /components/waterfall/  文件夹结构如图 各文件内容: 我这里直接就是写死了两列排列 然后在用到该组件的页面文件夹下  .json 文件夹中引入 注意:文件路径不要写错了!!!这里只是一个参考  然后使用该组件  对其dataArr【 注意:我这里定义的是dataArr!!! 】

    2024年02月16日
    浏览(43)
  • 微信小程序 - - - - - 瀑布流效果实现

    对于一些小程序,关于瀑布流的需求是很正常的,瀑布流看起来确实很舒服,但是具体该如何实现呢? 下文给出的方式是: js + css 瀑布流,又称 瀑布流式布局 。 是比较流行的一种网站页面布局, 视觉表现为 参差不齐的多栏布局 ,随着页面滚动条向下滚动,这种布局还会

    2024年02月17日
    浏览(42)
  • 微信小程序的无限瀑布流写法

    微信小程序的无限瀑布流实现总算做完了,换了好几种方法,过程中出现了各种BUG。 首先官方有瀑布流的插件(Skyline /grid-view),不是原生的我就不想引入,因为我的方块流页面已经搭好了,引入说不定就要涉及样式的修改、代码量的增大等麻烦问题。 H5我虽然也做了瀑布流

    2024年02月07日
    浏览(39)
  • 微信小程序瀑布流和虚拟列表

    首先声明虽然本篇是写的微信小程序的案例,但是也可用于H5,思路是想通的,只是有些api的差异,最后会贴代码片段 虚拟列表 一般在做长列表优化时,特别是面试时,虚拟列表就是个高频词。这个名词听起来很高级,其实原理很简单 虚拟列表就是将需要渲染的数组数据改

    2024年02月14日
    浏览(36)
  • uniapp 瀑布流 (APP+H5+微信小程序)

    WaterfallsFlow.vue waterfall.vue

    2024年02月15日
    浏览(56)
  • 瀑布流布局(CSS flex实现)

    关键点 使用了 vw 进行自适应缩放 html:

    2024年02月07日
    浏览(44)
  • css+js瀑布流布局实现

    记录一个瀑布流布局问题的解决过程 最开始使用js实现,将 子元素进行绝对定位,根据宽高及顺序判断定位的top与left 。 问题 :存在新增子元素页面加载不及时的问题,会出现子元素初始状态叠加在一起,计算完成后才能正常显示。 点击查看代码 再次尝试使用css中的colum

    2024年02月04日
    浏览(35)
  • 实现瀑布流布局的四种方法

    页面上是一种 参差不齐 的多栏布局,类似上图所示随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,大部分为图片,图片 固定 宽度,高度 不一 ,根据原比例缩放到宽度达到固定的要求,每行排满后,新的图片添加到后面 固定宽度,高度不一 岑

    2023年04月15日
    浏览(59)
  • vue3实现瀑布流布局组件

    先看效果图 直接上代码 utils.js data.js 模拟后台返回的数据 瀑布流布局组件 waterfall.vue 使用该组件(这里 columns 写死了3列) 若要响应式调整列数,可参考以下代码 瀑布流布局组件监听 columns 变化

    2024年02月21日
    浏览(51)
  • css 使用flex 完成瀑布流布局

    瀑布流布局在商城类、文章类 app、网页中都是常用的,使用这样的形式,能过让整个页面更加的活波,也能让图片根据实际的大小来显示,更好的展示图片内容。那么代码如何实现呢 其中下面代码部分是scss

    2024年02月04日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包