uni-app CookBook01 上拉加载更多 引入动画库 自定义导航栏 多图上传组件 动态修改导航栏标题 跳转并传参

目录

#上拉加载更多

#vue 引入animate动画库

#自定义导航栏

#多图上传组件

#动态修改导航栏的标题

#跳转并传参

---

#上拉加载更多

添加提示信息

	{{loadtext}}

监听触底事件

@scrolltolower="loadmore(index)"

向服务器请求更多数据

//上拉加载更多
			loadmore(index) {
				if (this.newslist[index].loadtext != "上拉启动半部电台,接收更多电波") {
					return;
				}
				//修改状态
				this.newslist[index].loadtext = "滴滴滴...半部电台正在接收中...";
				//获取数据
				setTimeout(() => {
					//获取完成
					let obj = {
						userpic: "../../static/tabbar/hacker.png",
						username: "光谷小五郎",
						isSubscribed: false,
						title: "出售半部电台！",
						type: "img", //img 图文 video 视频
						titlepic: "../../static/code.jpg",
						thumbs: {
							up_count: 11,
							down_count: 12,
							isThumb: 2 //0 未操作 1 顶 2踩
						},
						video: {},
						comment_num: 10,
						share_num: 10
					};
					this.newslist[index].list.push(obj);
					this.newslist[index].loadtext = "上拉启动半部电台,接收更多电波";
				}, 1000)

				// this.newslist[index].loadtext = "上拉启动半部电台,接收更多电波";
				// this.newslist[index].loadtext = "滴滴滴...半部电台正在接收中...";
				// this.newslist[index].loadtext = "没有更多电波了";
			}

#vue 引入animate动画库

官网直接下载，然后只需要将animate.css 引入到项目中，就可以直接使用了

一般对应的类名前都有前缀animate_

使用方法：

animate_animated animate_动画名

#自定义导航栏

需要引入的组件有

uni-nav-bar组件：

使用方法：

		
		
			
				{{cat}}
				
			
		

#多图上传组件

使用方法：

	
        
	
        //导入
        import uploadImages from '../../components/common/upload-images.vue';
    
        

	//从子组件接受上传的图片列表,便于父组件作为表单提交给服务端
	onUpload(arr){
		this.imglist = arr;
	}

#动态修改导航栏的标题

建议写在Onload中，可以实现根据跳转传参来动态修改本页面的标题

				//修改窗口标题
				uni.setNavigationBarTitle({
					title:标题
				})

#跳转并传参

例如：当需要传一个对象时候，需要先将对象 序列化

				uni.navigateTo({
					"url":"/pages/detail/detail?detailData="+JSON.stringify(this.item)
				})

然后在 跳转页面的 OnLoad函数中接受参数，并反序列化

OnLoad(e){
    let obj = JSON.parse(e.detailData);
}