小程序······uni-app框架项目-----------2
分页功能分析
上拉加载 1
- 使用 scroll-view 标签充当分页容器 实现吸顶灯效果
必须添加一个高度： 如果和弹性布局混用（display: flex;）需要在标签属性添加enable-flex
html
必须添加属性 scroll-y
<scroll-view scroll-y enable-flex class="recommends_view"</scroll-view>
css
.recommends_view{
//height 屏幕高度-头部标题高度 100%===100vh
height:calc(100vh - 36px);
}
calc（）函数用于动态计算长度值:
注意：
- 需要注意的是，*运算符前后都需要保留一个空格，*例如：width: calc(100% - 10px)；
- 任何长度值都可以使用calc（）函数进行计算；
- calc（）函数支持“ +”，“-”，“ *”，“ /”运算；
- calc（）函数使用标准的数学运算优先级规则；
- 绑定滚动条触底事件 scrolltolower
html
必须添加属性 scroll-y
<scroll-view scroll-y @scrolltolower="handleToLower" class="recommends_view"</scroll-view>
js
methods: {
handleToLower(){
//判断是否有数据
if(this.hasMore){
this.params.skip+=this.params.limit;
this.getList();
}else{
//提示效果
uni.showToast({
title:"没有数据了",
icon:"none"
})
}
}
},
实现分页逻辑代码
<template>
<scroll-view scroll-y enable-flex @scrolltolower="handleToLower" class="video_main" >
<!-- 循环数据 驱动页面显示 -->
<view class="video_item"
v-for="item in videowp"
:key="item.id"
>
<image mode="widthFix" :src="item.img"></image>
</view>
</scroll-view>
</template>
<script>
export default {
props: {
urlobj: Object
},
data() {
return {
videowp:[],
hasMore:true
};
},
//监听数据的变化重新挂载数据
watch: {
urlobj() {
//切换标题的时候需要清空数组
this.videowp=[];
//数据发生改变时 请求数据
this.getList();
}
},
mounted() {
console.log(this.urlobj);
//挂载完成时请求数据
this.getList();
},
methods: {
//发送请求获取数据的函数
async getList() {
let rs = await this.http({
url: this.urlobj.url,
data: this.urlobj.params
})
if (rs.res.videowp.length===0) {
this.hasMore=false;
//提示效果
uni.showToast({
title:"没有数据了",
icon:"none"
})
return;
}
this.videowp=[...this.videowp,...rs.res.videowp]
},
handleToLower(){
//判断是否有数据 urlobj数据有 watch监听
if(this.hasMore){
this.urlobj.params.skip+=this.urlobj.params.limit;
this.getList();
}else{
//提示效果
uni.showToast({
title:"没有数据了",
icon:"none"
})
}
}
}
};
</script>
<style lang="scss" scoped>
.video_main{
display: flex;
flex-wrap: wrap;
height: calc(100vh - 36px);
.video_item{
width: 33.33%;
image{
border: 5rpx solid #fff;
}
}
}
</style>
小结
- hasMore:true 控制数据是否有 添加提示
- this.videowp=[…this.videowp,…rs.res.videowp] 扩展数据 每次加载下一页进行数据拼接
- 切换标题的时候需要清空数组 因为切换在父组件 所以 在检测到变化的时候 可以进行清空数组
watch: {
urlobj() {
//切换标题的时候需要清空数组
this.videowp=[];
//数据发生改变时 请求数据
this.getList();
}
},
上拉加载2
与data 同级
onReachBottom(){
},
轮播图
swiper
在轮播图中图片等比例缩放解决方案：
-
根据数据图片的宽高算出比例 宽/高 例如 img （640*284）
则比例为 640/284≈2.3 -
小程序的基本高度为750rpx
-
则在scc样式中计算：
swiper{
height:calc(750rpx / 2.3)
image{
height: 100%;
}
}
文字溢出处理 给文字标签添加
注意 用flex 布局的时候需要给 父容器添加 overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
滑动图片切换
封装手势滑动 进行数据切换
代码：
/*
实现 容器左右滑动
@touchstart="handleTouchstart" 手势按下
@touchend="handleTouchend" 手势松开
*/
<template>
<view @touchstart="handleTouchstart" @touchend="handleTouchend">
<!-- 1 slot 2 对外提供数据 滑动的方向 -->
<slot></slot>
</view>
</template>
<script>
export default {
data() {
return {
//按下的时间
startTime: 0,
//按下的坐标
startX: 0,
startY: 0
};
},
methods: {
//用户按下屏幕
handleTouchstart(e) {
// 获取按下的的时间戳
this.startTime = Date.now();
//获取坐标
this.startX = e.changedTouches[0].clientX;
this.startY = e.changedTouches[0].clientY;
},
//用户松开
handleTouchend(e) {
//记录松开的时间
const endTime = Date.now();
//获取松开的坐标
const endX = e.changedTouches[0].clientX;
const endY = e.changedTouches[0].clientY;
//判断按下的时长 大于两秒 结束
if (endTime - this.startTime > 2000) {
return;
}
//滑动的方向 direction 储存方向值 right left
let direction = "";
//判断合法距离
if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) > 10) {
direction = endX - this.startX > 0 ? "right" : "left";
} else {
return;
}
//用户做了合法滑动规则 子组件向父组件传值 用自定义事件
console.log(direction);
this.$emit("swiperAction", { direction });
}
}
};
</script>
<style>
</style>
分段器
<template>
<view>
<view class="video_tab">
<view class="video_tab_title">
<view class="title_inner">
<uni-segmented-control
:current="current"
:values="items"
@clickItem="onClickItem"
style-type="text"
active-color="#d4237a"
></uni-segmented-control>
</view>
<view class="iconfont iconsearch"></view>
</view>
<view class="video_tab_content">
<view v-show="current === 0">
<home-recommend></home-recommend>
</view>
<view v-show="current === 1">
<home-category></home-category>
</view>
<view v-show="current === 2">
<home-new></home-new>
</view>
<view v-show="current === 3">
<home-album></home-album>
</view>
</view>
</view>
</view>
</template>
<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
components: {
uniSegmentedControl
},
data() {
return {
items: ["推荐", "娱乐", "最新", "热门","分类"],
//模块的下标 0 推荐 1 分类 2最新 3专辑
current: 0
};
},
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex;
}
}
}
};
</script>
<style lang="scss">
.video_tab {
.video_tab_title {
position: relative;
.title_inner {
width: 60%;
margin: 0 auto;
}
.iconsearch {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 5%;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
}
}
.video tab_content {
}
}
</style>
小知识点
1.小程序图片 属性
//高度自适应
<image mode="widthFix"></image>
//等比例拉伸 填充
<image mode="aspectFill"></image>
- scope vue基础 style的作用域 仅在此页面
- 将时间戳 改成 18号/月 使用第三方库 moment.js
官方文档http://momentjs.cn/
安装
npm install moment --save # npm
yarn add moment # Yarn
使用： 在使用的页面导入
import module from "module";
-
this.hots=[…this.hots,…result.res.vertical];
es6 写法 同过扩展运算符 实现 数组之间的拼接 -
判断对象有无数据
if(Object.keys(this.album).length===0){
this.album=result.res.album;
} -
父组件传子组件
父组件：
<video-main :urlobj="{url:items[current].url,params:items[current].params}"></video-main>
子组件
export default {
props: {
urlobj:Object
},
mounted () {
//相当于 data中的数据 需要用this获取
console.log(this.urlobj);
},
}
- 子组件传父组件 使用事件
子组件
this.$emit("swiperAction", { direction });
父组件
<swiper-action @swiperAction="handleSwiperAction">
<image :src="imgDetail.newimg"></image>
</swiper-action>
js:
methods: {
handleSwiperAction(e){
console.log(e) //获取子组件的数值
}
}
- 全局数据
定义全局数据
getApp().globalData.imgList = this.list;
getApp().globalData.imgIndex = this.index;
其他组件结构数据
非组件在onload函数 组件在
组件加载完毕就会触发
mounted() {
const {imgIndex}=getApp().globalData;
},
onLoad：{
const {imgIndex}=getApp().globalData;
}
- 共同用一个组件的时候 组件切换 数据改变 挂载重新执行 加载数据时 可以用watch函数监听变化重新挂载
export default {
//获取父组件传过来的数据
props: {
urlobj:Object
},
//监听组件的变化 重新挂载数据
watch: {
urlobj(){
console.log(“urlobj数据发生了变化”)
}
},
}
props: {
urlobj: Object
},
data() {
return {
url: value,
parent: []
};
},
//监听数据的变化重新挂载数据
watch: {
urlobj() {
//数据发生改变时 请求数据
this.getList();
}
},
mounted() {
console.log(this.urlobj);
//挂载完成时请求数据
this.getList();
},
methods: {
//发送请求获取数据的函数
async getList() {
let rs = await this.http({
url: this.urlobj.url,
data: this.urlobj.params
});
}
}
};