uni-app day4 封装数据请求、卡片组件

封装数据请求

1. common下创建一个api目录，在main.js中引用并绑定到Vue的prototype上

import api from './common/api'
Vue.prototype.$api = api

2. 在common中创建http.js文件，封装网络请求函数

export default function $http(options) {
	const {                                     //接收传入的参数
		url,
		data
	} = options
	return new Promise((reslove, reject) => {   //回调
		uniCloud.callFunction({                 //调用云函数方法
			name: url,
			data
		}).then((res) => {                      //then方法返回
			if (res.result.code === 200) {
				reslove(res.result)
			} else {
				reject(res.resule)
			}
		}).catch((err => {
			reject(err)
		}))
	})
}

3. api目录下创建list.js，引用http.js文件

import $http from '../http.js'

export const get_label = (data) => {   
	return $http({
		url: 'get_label',
		data
	})
}

4. api创建中创建index.js文件，用来批量导出文件

//批量导出文件
const requireApi = require.context(
	//api 目录的相对路径
	'.',
	//是否查询子目录
	false,
	//查询文件的一个后缀
	/.js$/
)

let module = {}
requireApi.keys().forEach((key, index) => {
	if (key === './index.js') return
	console.log(key);
	Object.assign(module, requireApi(key))
})

export default module

5. 在页面index.vue中创建函数传参调用

getLabel() {
				this.$api.get_label({
					name: 'get_label'
				}).then((res) => {
					const {
						data
					} = res
					this.tabList = data
					// console.log(res) 
				})
			}

选项卡切换

//tab.vue
//点击后添加高亮（标签中添加）
:class="{active:activeIndex === index}"
//创建点击事件，调用方法 （标签中添加）
@click="clickTab(item,index)" 
//mothods中创建方法
methods: {
			clickTab(item, index) {
				this.activeIndex = index;
				//创建自定义事件，传递对象给index页面的tab组件
				this.$emit('tab', {   
					data: item,
					index: index
				})
			}
		}
//给active类添加样式
&.active {
		color: $mk-base-color;
}

//index.vue
//接收
<tab :list="tabList" @tab="tab"></tab>
//注册
methods: {
	tab({data,index}){
		console.log(data, index);
	}
}

卡片组建

…

样式

overflow 属性规定当内容溢出元素框时发生的事情；
flex: 1; === flex: 1 1 auto;
box-shadow 属性可以设置一个或多个下拉阴影的框；
text-overflow 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 ；
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示；
-webkit-line-clamp 盒子显示行数；
-webkit-box-orient； 设置或检索伸缩盒对象的子元素的排列方式 ；