最近uniapp做了一个项目：效果如图：小程序和h5效果基本一致

                                        

 主要涉及到以下几个功能：

1 瀑布流布局，

2 上拉加载更多

3  点击图片预览

ui框架-：uview

-----------------------------------------------------------------------

先说下遇到的几个问题：

1 瀑布流的实现。由于uview1.x版本提供了瀑布流组件实现。所以就地取材

<view class="main-container">
			<u-waterfall v-model="imgList" ref="uWaterfall" >
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load 
							threshold="-350" 
							:status="loadStatus" 
							border-radius="10" 
							@click="e=>prevImge(e,item)" 
							:image="item.imageUrl" 
							:height="300"
							:index="index"
							
						>
						</u-lazy-load>												
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load 
							threshold="-350" 
							border-radius="10" 
							@click="e=>prevImge(e,item)" 
							:image="item.imageUrl" 
							:height="300"
							
							:index="index"
						>
						</u-lazy-load>												
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore" :load-text="loadText"></u-loadmore>
		</view>

这里需要注意的几个点：

1 官方的demo里下拉加载是通过u-loadmore组件实现的。但是经过测试发现。滚动到底的时候基本上无法触发这个事件，只有点击底部的“加载更多”文字才会触发。感觉很鸡肋。最后采用了框架原生提供的onReachBottom()事件来实现。这个事件是页面root级的事件。和onShow等一样。我们可以在page.json中给当前页面设置onReachBottomDistance：number，代表距离底部多少触发多少加载更多。这个在当前页面就会在滚动距离底部多少距离时自动加载下一页。

第一步：

pages.json中做如下设置:


{
	"easycom": {
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			
			"style": {
				"navigationBarTitleText": "灵感库",
				"onReachBottomDistance":300 
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

第二步:

data(){
    return{
    }
},
methods:{

},	
onReachBottom(){
			
				this.query.pageNo++;
				if (this.query.pageNo <= this.totalPageSize) {
				this.loadStatus="loading"
				this.$u.api.getImgsByVistor(this.query).then(res => {
					
					this.loadStatus="loadmore"
					this.imgList = this.imgList.concat(res.data.records);
					let temp = []
					this.imgList.forEach(item => { temp.push(item.imageUrl) })
					if (this.imgList.length == this.total) {
						this.loadStatus="nomore"						
					  }
				}).finally(() => {
				  this.loadStatus  ="loadmore"
				})
			} else {
					console.log("加载结束")
					return
			}
		}

2 图片预览：

由于图片的加载才用的是u-lazy-load 懒加载组件。官方给提供了一个点击事件。但是比较坑的是这个点击事件的参数是当前的索引。

 而在我们这个项目中，由于每次上拉加载都会拿新的数据拼接之前的数据，所以索引值不能正确定位图片本身。这样会导致在点击预览的时候，点击的是A图，预览的是B图。

解决办法：

给点击事件做如下更改

<u-lazy-load     
	threshold="-350" 
	:status="loadStatus" 
	border-radius="10" 
	@click="e=>prevImge(e,item)" 
	:image="item.imageUrl" 
	:height="300"
	:index="index"
							
>
</u-lazy-load>	
注意这里的	@click="e=>prevImge(e,item)" 

预览逻辑:

	prevImge(e,item){
				console.log("e:",e)
				console.log("item:",item)
			
				var images = [];
				images.push(item.imageUrl);
			
					current:0,
					urls:images,
					longPressActions: {  //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data)=> {
							console.log(data);
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: data,
								success: function () {
									uni.showToast({icon:'success',title:'保存成功'})
								},
								fail: (err) => {
									uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
								}
							});
						},
						fail: (err)=> {
							console.log(err.errMsg);
						}
					}
				})
			}

这样就能正常预览图片了。

3：瀑布流容器记得加一个高度。不然小程序会出现图片挤在一起的情况：

<view class="main-container">
			<u-waterfall v-model="imgList" ref="uWaterfall" >
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load 
							threshold="-350" 
							:status="loadStatus" 
							border-radius="10" 
							@click="e=>prevImge(e,item)" 
							:image="item.imageUrl" 
							:height="300"
							:index="index"
							
						>
						</u-lazy-load>												
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load 
							threshold="-350" 
							border-radius="10" 
							@click="e=>prevImge(e,item)" 
							:image="item.imageUrl" 
							:height="300"
							
							:index="index"
						>
						</u-lazy-load>												
					</view>
				</template>
			</u-waterfall>
		</view>

注意main-container的样式:

	.main-container{
		padding: 6rpx;
		box-sizing: border-box;
		min-height: 100vh; //关键点之一。不然小程序上会出现挤在一起的情况
	}

小程序运行正常。接口请求正常，但是真机调试接口一直报错：没有返回值？

注意查看公众号后台是否绑定该域名