# Uni-ui组件库学习 第三篇
# 功能
# 列表展示
- 发请求 拿回数据
uni-appuni.request - 做展示 v-for :key是唯一i的
# 触底加载
触底事件
onReachBottomuni-app中已经封装在了页面周期函数中 加载翻页的数据翻页的数据返回之后，需要进行数据的拼接 拼数组 取到数组那一层
页面上显示加载的效果，加载过程中文字提示。
uni-load-more组件 通过status属性 修改文字提示 moreloading，
noMore
# 下拉刷新
- 默认页面 是不开启下拉事件 需要在
pages.json中开启 - 下拉事件
onPullDownRefresh加载第一页数据 - 请求数据返回后，
uni.stopPullDownRefresh()停止刷新的状态 小圆圈停止
# 回到顶部
- 回到顶部按钮 显示 通过
onPageScroll监控页面滚动位置 v-show结合显示按钮 - 回到顶部
uni.pageScrollTo{scrollTop:0} 0回到顶部
# 宫格布局
uni-grid
双列布局 cloumn 属性 2
不要点击高亮 不要边框 不要正方形显示
# 跨域问题
浏览器跨域 因为同源策略
跨域：协议不同 域名不同 端口不同
前后端分离后 接口服务器和前端页面服务器不在一起
解决方案：
jsonp目前不流行
cors接口服务端配置 公司业务运维中可以要求运维配置proxy开发的过程中， 更多的使用代理方式底层是工程化打包工具 是
webpackvue-cli基于webpack开发的,自己搭建一套工程化软件，可以使用webpack面试会问一些原理性的内容 如何打包的sass如何编译的等等？
# 弹出层
子元素绑定ref
<el ref = "myel">
调用元素的方法 this.$refs.myel.方法名
# 组件库学习
# 案例 ：宫格布局 斗鱼直播列表
完成了列表展示，接下来 完成触底加载 下拉刷新 回到顶部
屏幕太大 加载的数据不够 导致不能触底
解决方案，就是在服务器端多返回一些数据。可以限制煤业传输几个。。。
在客户端请求接口时，多请求一些数据 提前把第二页加载出来
mounted() {
this.getDate()
// 提前加载第二页
this.getDate(2)
},
# Tab小标签
<template>
<view>
<!-- tag标签 -->
<!-- alt+/ 属性提示 -->
<uni-tag text="小标签" type="default"></uni-tag>
<uni-tag text="小标签" type="error"></uni-tag>
<uni-tag text="小标签" type="primary" size="small"></uni-tag>
<uni-tag text="小标签" type="success" size="mini"></uni-tag>
<uni-tag text="小标签" type="warinig" size="default"></uni-tag>
<uni-tag text="小标签" type="warinig" size="default" circle></uni-tag>
<uni-tag text="小标签" type="primary" size="default" circle inverted></uni-tag>
</view>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
# 步骤条
案例代码如下
、<template>
<view>
<!-- step 步骤条 ustep -->
<uni-steps :options="options" :active="steps" direction="column"></uni-steps>
<button type="default" @click="doNext">下一步</button>
<uni-popup ref="popup" type="message">
<uni-popup-message type="error" message="不能再点了" :duration="1000"></uni-popup-message>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
options:[
{title:'第一阶段',desc:'服务端'},
{title:'第二阶段',desc:'布局与交互'},
{title:'第三阶段',desc:'JS核心'},
{title:'第四阶段',desc:'UI组件、H5、小程序'},
{title:'第五阶段',desc:'高级框架'}
],
steps:0
}
},
methods:{
doNext(){
this.steps++
if(this.steps > 4){
this.$refs.popup.open()
this.steps = 4
}
}
}
}
</script>
<style scoped>
</style>
# 商品列表
可能会出现的问题 data中的数据 key要求小驼峰命名法
<template>
<view>
<uni-goods-nav />
<!-- ugoodsnav 商品导航 -->
<uni-goods-nav :options="options" :button-group="buttonGroup" @click="doClickLeft" @buttonClick="doClickRight" style="position: fixed;bottom: 0; width: 100%;" />
</view>
</template>
<script>
export default {
data() {
return {
options: [{ text: 'QQ', icon: 'qq', info: 3 }, { text: '微信', icon: 'weixin', info: 0 }, { text: '微博', icon: 'weibo', info: 2 }],
// 右侧的按钮组
buttonGroup: [{ text: '加入购物车', color: 'white', backgroundColor: '#F55' }, { text: '购买', color: '#F55', backgroundColor: '#3FF' }]
};
},
methods: {
doClickLeft(e) {
// 申明msg
// let msg = '';
// console.log(e.index);
// // 判断分支语法
// switch(e.index){
// case 0:
// msg='点击QQ了';
// break;
// case 1:
// msg='点击微信了';
// break;
// case 2:
// msg='点击微博了';
// break;
// }
let msg_arr = ['点击QQ了', '点击微信了', '点击微博了'];
uni.showToast({
title: msg_arr[e.index]
});
},
doClickRight(e) {
console.log(e);
// let msg = "";
// switch(e.index){
// case 0:
// msg = "点击加入购物车";
// break;
// case 1:
// msg = "点击购物了";
// break;
// }
// uni.showToast(
// {
// title:msg
// }
// )
let msg_arr = ['点击加入购物车', '点击购物了'];
uni.showToast({ title: msg_arr[e.index] });
}
}
};
</script>
<style scoped></style>
# 轮播图
轮播图是uni-app基础组件 swiper组件
<template>
<view>
<!-- uswiper -->
<!-- uni-ui 提供了轮播图指示点的组件 -->
<!-- swiper组件标签放在uni-swiper组件里面 -->
<!-- info 轮播图的数组 -->
<!-- current 当前轮播的第几项 是变化 需要vue data里进行配置 -->
<!-- field 显示的文字 -->
<uni-swiper-dot :info="banners" :current="current" field="title" mode="nav" :dotsStyles="{backgroundColor:'#69d0ff'}">
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="doChange">
<!-- 轮播中每一个元素 -->
<!-- :key 一定要写 不写会报警告 没有：key 无法编译通过 -->
<swiper-item v-for="(item, index) in banners" :key="index"><image :src="item.url" mode="" style="width: 100%; height: 300rpx;"></image></swiper-item>
</swiper>
</uni-swiper-dot>
</view>
</template>
<script>
export default {
data() {
return {
// 轮播图当前项索引下标 从0开始 第一张
current: 0,
banners: [
{ title: '小新笔记本', url: 'http://www.codeboy.com:9999/img/index/banner1.png' },
{ title: '戴尔XPS', url: 'http://www.codeboy.com:9999/img/index/banner2.png' },
{ title: '皮面笔记本', url: 'http://www.codeboy.com:9999/img/index/banner3.png' },
{ title: '网格本', url: 'http://www.codeboy.com:9999/img/index/banner4.png' }
]
};
},
methods:{
doChange(e){
console.log(e)
this.current = e.detail.current
}
}
};
</script>
<style scoped></style>
# 条件编译
uni-app编写代码，需要编译成多个客户端代码执行
本身多端是具有差异性，代码编译过程中，需要处理这些差异，就需要使用条件编译语法
判断在H5端、小程序、手机端APP不同的平台，执行不同的代码段。
<template>
<view>
<!-- 条件编译 判断不同的平台 使用不同的代码 -->
<!-- ifdef 满足后面条件 即执行里面的代码 -->
<!-- #ifdef H5 -->
<view class="cell">这是H5平台</view>
<!-- #endif -->
<!-- #ifdef MP -->
<view class="cell">这是微信小程序</view>
<!-- #endif -->
<!--#ifdef APP-PLUS -->
<view class="cell">这是手机端平台</view>
<!-- #endif -->
<!-- ifndef 不满足后续执行 -->
<!-- #ifndef H5 -->
<view class="cell">非浏览器端</view>
<!-- #endif -->
</view>
</template>
<script>
export default {};
</script>
<style scoped>
.cell{
/* #ifdef H5 */
color: red;
/* #endif */
/* #ifdef MP */
color: #007AFF;
/* #endif */
/* #ifndef H5 */
color: #18BC37;
/* #endif */
}
</style>
这里使用的条件编译，是为了处理接口地址跨域的问题
跨域问题是在浏览器端和H5端其他端，微信小程序和手机APP端不存在跨域问题
# 自定义导航栏
导航栏的需求：
1.登录页面 没有头部导航栏 设置隐藏掉
2.头部导航栏 具有更多的功能 又左侧和右侧的按钮 以及文字
<template>
<view>
<!-- 自定义导航栏 navbar-->
<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="标题" @clickLeft="doClickLeft" @clickRight="doClickRight" @clickTitle="doClickTitle"></uni-nav-bar>
</view>
</template>
<script>
export default {
methods: {
doClickLeft() {
uni.showToast({
title:'返回'
})
},
doClickRight(){
uni.showToast({
title:'扫码中'
})
},
doClickTitle(){
uni.showToast({
title:'标题'
})
}
},
};
</script>
<style scoped lang="scss">
// 修改组件内部的样式 需要穿透 /deep/
/deep/.uni-navbar__header-btns-right{
padding-right:0;
}
</style>
# 侧边栏导航
LOL侧边栏
接口：
英雄列表： https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=50
英雄详细信息： https://game.gtimg.cn/images/lol/act/img/js/hero/ 英雄id.js
头像地址 https://game.gtimg.cn/images/lol/act/img/champion/ 英雄alias.png
分析：
左侧和右侧都为一个滚动视图
1.按比例 左（30%） 右侧（70%）
2.左侧的菜单点击请求到数据，显示在右侧，默认加载左侧的菜单，显示在右侧
<template>
<view v-show="heroList">
<!-- 左侧 -->
<!-- 滚动视图单独滚动 需要设定高度 屏幕高度一致 -->
<!-- 动态获取屏幕视窗的高度 设置高度 -->
<scroll-view scroll-y style="width: 30%;" :style="{height:windowHeight+'px'}">
<view v-for="(item,index) in heroList" :key="index" >
{{item.name}}
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
heroList: null,
}
},
// 发请求 拿数据 存本地 做展示
mounted() {
this.getHeroList()
},
methods:{
getHeroList(){
const url = 'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=50'
uni.request({
url,
method: 'GET',
data: {},
success: res => {
console.log(res)
this.heroList = res.data.hero
},
fail: () => {},
complete: () => {}
});
}
},
// 如果一个值是通过其他值计算获取到的，适合存储在计算属性中 有缓存 加载效率更高
computed:{
windowHeight(){
// 获取视窗高度 多端具有兼容性
return uni.getSystemInfoSync().windowHeight;
}
}
}
</script>
<style scoped>
</style>