uni-app首页开发以及组件

uni-app首页开发以及组件

uni-app中的基本组件和微信小程序中的差不多。更适合在手机端的开发。

1.自定义组件prolist

在pages的同级目录下新建一个文件夹components，然后在里面新建一个prolist的文件夹，里面新建prolist.vue，在prolist.vue中写上自定义内容可以在home.vue中直接引用，不需要导入操作(详见easycom)。如下图：

如果还有其他自定义组件，就按照格式在components文件夹下先新建一个组件名的文件夹然后在写vue文件。

2.轮播图swiper

轮播图swiper的格式为：

    
    
        
    
    ...

当然还可以对照轮播图组件的属性表给容器添加属性：

图片懒加载其实就是当一个很长的页面中有许多图片资源时，如果等待全部图片加载完再显示页面可能会很慢，因此在有一些页面暂时没有滑动到的地方的图片先不加载，等往下滑动到了再加载。

对于微信小程序中的一些组件属性的格式基本为：xxx=“{{...}}”，但是在uni-app中写的是vue语法，当要绑定的是值是变量时，所以格式要变换为绑定属性的格式，即:xxx=“...”。例如上面的:lazy-load="true"，对于lazy-load它的值是boolean类型，属于变量；而对于mode，widthFix只是它特定的一个值而已，所以不用加冒号。

3.发起请求uni.request

1.新建工具类utils

在整个目录下新建utils文件夹，里面新建一个index.js文件，作为工具类：

const baseUrl = "http://daxun.kuboy.top/api" //设置基本地址

export function request(options) {
	const {url, method, data, header} = options
	uni.showLoading({
		title:'加载中'
	});
	return new Promise ((resolve,reject)=>{
		uni.request({
			url: baseUrl + url,
			data: data || {},
			method: method || 'GET',
			header: header || {},
			timeout: 6000, //设置请求超时时间
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	})
}

2.实现请求+页面渲染

在home.vue中请求数据和微信小程序中的类似，要注意的是这里用的是vue语法，与小程序还是有一点差别的。

注意：在设置图片路径的时候因为是动态获取数据，图片路径即为变量，所以需要用:src="item.img"。修改状态值时不需要再用到this.setData，直接this.bannerlist = res.data.data即可。

4.实现商品列表的自定义组件prolist

1.先写好自定义组件prolist的基本样式

因为之前说过按照components/prolist/prolist.vue格式的组件不需要import引入就可以直接使用。如果是其他格式的话需要引入，引入格式为：

2.请求数据，父组件home.vue给子组件prolist.vue传值

首先在父组件home.vue中请求数据并赋值给变量prolist：

然后在子组件中用刚才传递过来的自定义属性prolist来进行页面数据的渲染：

...

在写图片路径的时候不要忘记加冒号：:src="item.proimg"

5.下拉刷新，上拉加载

页面生命周期

注意，onPullDownRefresh ()和onReachBottom ()这两个方法都是和生命周期函数同级的，所在直接在标签下写即可。

6.返回顶部按钮功能实现

首先在页面上写一个view作为"按钮"，然后绑定点击事件：

...



t" @click="backtop">

...