uniapp 瀑布流!成了! 用插件市场<waterfallsFlow>,拿到后端传过来的数据,添加属性

<!-- 瀑布流 -->
					<div class="waterfall-content">
						<waterfallsFlow :list="list" :cols="cols" :single="single" @wapper-lick="preview()">
							<!-- <template v-slot:default="item"> -->
							<!-- 此处添加插槽内容 -->
							<!-- <view class="cnt">
			          <view class="title">{{item.title}}</view>
			          <view class="text">{{item.text}}</view>
			        </view> -->
							<!-- </template> -->
						</waterfallsFlow>
					</div>

script 部分:

在data中: list是请求的后端接口

single: true,
cols: 5,
//这个list数组的格式一定要注意
list: [
        {
			id:1,
			image_url:'../../../static/details.png'
		}
	  ],

请求:

// 请求列表
const _this = this //不然this.拿不到
					uni.request({
						url: '****',  
						method: 'GET', //请求方式  或GET,必须为大写
						data: {
							type: _this.type,
							search:_this.searchvalue
						},
						success: (res) => {
							console.log("搜索=>", res.data.data);
							_this.searchshuzu = res.data.data
							var photosearch =[]
							_this.searchshuzu.map((item, index) => {
							  photosearch.push(
                                //重新加属性建数组,符合组件的要求
							    Object.assign( {id:item.id},{ image_url: item.image} )
							  ) 
							})
							console.log(photosearch)
							_this.list = photosearch
							console.log(_this.list)
						}
					});

这样就成咯

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值