一、uniapp项目（封装异步请求、moment.js时间处理、封装手势滑动组件、下载图片到本地）
2024-05-08 20:33:04
一、封装异步请求：
1. 为什么要封装？
2. 封装的思路
export default (params) => {// 显示加载中uni.showLoading({title: "加载中"})return new Promise((resolve, reject) => {wx.request({...params,success(res) {resolve(res)},fail(err) {reject(err)},complete() {uni.hideLoading()}})})
}
二、处理时间moment.js
http://momentjs.cn/
三、封装手势滑动组件
3.1 实现思路
3.2 关键代码
<template><view @touchstart="handleTouchStart"@touchend="handleTouchEnd">学习触屏事件</view>
</template><script>/*1给容器绑定两个触屏事件touchstart和Itouchend2用户按下屏幕事件1记录用户按下屏幕的时间Date.now（）时间戳返回1970-1-1到现在的亳秒数2记录用户按下屏幕的坐标x和y3用户离开屏幕事件1记录用户离开屏幕的时间Date.now（）2记录用户离开屏幕的坐标×和y3根据两个时间运算判断用户按下屏幕时长是否合法4根据两对坐标判断距离是否合法判断滑动的方向*/export default {data() {return {startTime: 0, // 按下的时间startX: 0, // 按下的坐标startY: 0}},methods: {// 用户按下屏幕handleTouchStart (event) {console.log("handleTouchStart 手指按下屏幕")// console.log("按下" + event.changedTouches[0].clientX)// console.log("按下" + event.changedTouches[0].clientY)this.startTime = Date.now()this.startX = event.changedTouches[0].clientXthis.startY = event.changedTouches[0].clientY},handleTouchEnd (event) {console.log("handleTouchEnd 手指离开屏幕")// console.log("离开" + event.changedTouches[0].clientX)// console.log("离开" + event.changedTouches[0].clientY)const endTime = Date.now()const endX = event.changedTouches[0].clientXconst endY = event.changedTouches[0].clientY// 判断按下的时长if(endTime - this.startTime > 2000) {return;}// 滑动的方向let direction = ""// 判断用户滑动的距离是否合法// 合法再判断滑动的方向if(Math.abs(endX-this.startX) > 10) {// 滑动方向direction = endX - this.startX > 0 ? "right" : "left"} else {return;}// 用户做了合法的滑动操作console.log(direction)}}}
</script><style>view {width: 100%;height: 500rpx;background-color: aqua;}
</style>
3.3 实现滑动手势组件 SwiperAction
swiperAction组件代码：
<template><view><view>swiperAction</view><view@touchstart="handleTouchStart"@touchend="handleTouchEnd"><slot></slot></view></view>
</template><script>/*1给容器绑定两个触屏事件touchstart和Itouchend2用户按下屏幕事件1记录用户按下屏幕的时间Date.now（）时间戳返回1970-1-1到现在的亳秒数2记录用户按下屏幕的坐标x和y3用户离开屏幕事件1记录用户离开屏幕的时间Date.now（）2记录用户离开屏幕的坐标×和y3根据两个时间运算判断用户按下屏幕时长是否合法4根据两对坐标判断距离是否合法判断滑动的方向*/export default {data() {return {startTime: 0, // 按下的时间startX: 0, // 按下的坐标startY: 0}},methods: {// 用户按下屏幕handleTouchStart (event) {console.log("handleTouchStart 手指按下屏幕")// console.log("按下" + event.changedTouches[0].clientX)// console.log("按下" + event.changedTouches[0].clientY)this.startTime = Date.now()this.startX = event.changedTouches[0].clientXthis.startY = event.changedTouches[0].clientY},handleTouchEnd (event) {console.log("handleTouchEnd 手指离开屏幕")// console.log("离开" + event.changedTouches[0].clientX)// console.log("离开" + event.changedTouches[0].clientY)const endTime = Date.now()const endX = event.changedTouches[0].clientXconst endY = event.changedTouches[0].clientY// 判断按下的时长if(endTime - this.startTime > 2000) {return;}// 滑动的方向let direction = ""// 判断用户滑动的距离是否合法// 合法再判断滑动的方向if(Math.abs(endX-this.startX) > 10) {// 滑动方向direction = endX - this.startX > 0 ? "right" : "left"} else {return;}// 用户做了合法的滑动操作console.log(direction)this.$emit("swiperAction", {direction})}}}
</script><style lang="scss"></style>在imgDetail页面中使用：
通过改变imgIndex来切换图片
<template><view><!-- 用户信息开始 --><view class="user_info"><view class="user_icon"><image :src="imgDetail.user.avatar" mode="widthFix"></image></view><view class="user_desc"><view class="user_name">{{ imgDetail.user.name }}</view><view class="user_time">{{ imgDetail.cnTime }}</view></view></view><!-- 用户信息结束 --><!-- 高清大图开始 --><view class="high_img"><swiper-action @swiperAction="handleSwiperAcion"><image :src="imgDetail.img" mode="widthFix"></image></swiper-action></view><!-- 高清大图结束 --><!-- 点赞 开始 --><view class="user_rank"><view class="rank"><text class="iconfont icon-dianzan">{{ imgDetail.rank }}</text></view><view class="user_collect"><text class="iconfont icon-shoucang">收藏</text></view></view><!-- 点赞 结束 --><!-- 最新评论 开始 --><view class="comment_hot"><view class="comment_title"><text class="iconfont icon-hot1"></text><text class="comment_text">最新评论</text></view><view class="comment_list"><view class="comment_item" :key="item.id" v-for="item in comment"><!-- 用户信息 --><view class="comment_user"><!-- 用户头像 --><view class="user_icon"><image :src="item.user.avatar" mode="widthFix"></image><!-- 用户名称 --><view class="user_name"><view class="user_nickname">{{item.user.name}}</view><view class="user_time">{{item.cnTime}}</view></view><!-- 用户徽章 --><view class="user_badge"><image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon" mode=""></image></view></view></view><!-- 评论数据 --><view class="comment_desc"><view class="comment_content">{{ item.content }}</view><view class="comment_like"><text class="iconfont icon-dianzan">{{ item.size }}</text></view></view></view></view></view><!-- 最新评论 结束 --></view>
</template><script>import moment from "moment"// 设置语言为中文moment.locale("zh-cn")import swiperAction from "@/components/swiperAction.vue"export default {data() {return {// 图片信息对象，包含用户头像imgDetail: {},hot: [], // 热门评论comment: [], //最新评论imgIndex: 0 //高清大图的索引}},components: {swiperAction},onLoad() {console.log(getApp().globalData.imgList)const {imgList,imgIndex} = getApp().globalDatathis.imgIndex = imgIndex// this.imgDetail = imgList[this.imgIndex]// // xxx 年前// this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow()// // 获取图片详情的id// // this.imgDetail.id// this.getComments(this.imgDetail.id)this.getData()},methods: {getComments(id) {this.request({url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`}).then((res) => {console.log(res)this.hot = res.data.res.hotthis.comment = res.data.res.commentres.data.res.comment.forEach(v => {v.cnTime = moment(v.atime*1000).fromNow()})})},getData() {const {imgList} = getApp().globalDatathis.imgDetail = imgList[this.imgIndex]// xxx 年前this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow()// 获取图片详情的id// this.imgDetail.idthis.getComments(this.imgDetail.id)},// 自定义的组件的滑动事件handleSwiperAcion (e) {console.log(e)/* 1. 用户左滑， index++2. 用户右滑 index--3. 判断数组是否越界的问题*/const {imgList} = getApp().globalDataif (e.direction === "left" && this.imgIndex < imgList.length-1) {// 可以进行 左滑 ，加载下一张图片this.imgIndex++this.getData()} else if (e.direction === "right" && this.imgIndex > 0) {// 可以进行 右滑 ，加载上一张图片this.imgIndex--this.getData()} else {uni.showToast({title: "没有数据啦",icon: "none"})}}}}
</script><style lang="scss" scoped>.user_info {display: flex;align-items: center;padding: 20rpx;.user_icon {padding: 0 20rpx;image {width: 88rpx;border-radius: 50%;}}.user_desc {.user_name {color: #000000;font-weight: 600;}.user_time {color: #CCCCCC;font-size: 24rpx;padding: 10rpx 0;}}}.user_rank {display: flex;height: 80rpx;border-bottom: 5rpx solid #EEEEEE;.rank {display: flex;justify-content: center;align-items: center;flex: 1;.iconfont {}}.user_collect {display: flex;justify-content: center;align-items: center;flex: 1;.iconfont {}}}.comment_hot {.comment_title {padding: 15rpx;.iconfont {color: red;font-size: 40rpx;}.comment_text {font-weight: 600;font-size: 28rpx;color: #666666;margin-left: 10rpx;}}.comment_list {.comment_item {border-bottom: 15rpx solid #EEEEEE;// 用户信息.comment_user {display: flex;padding: 20rpx 10rpx;.user_icon {display: flex;width: 35%;justify-content: center;align-items: center;image {border-radius: 50%;width: 40%;height: 90%;}}.user_name {flex: 1;margin-left: 10rpx;.user_nickname {color: #777;}.user_time {color: #ccc;font-size: 24rpx;padding: 5rpx;}}.user_badge {image {width: 40rpx;height: 40rpx;}}}// 评论数据.comment_desc {display: flex;padding: 10rpx 0;.comment_content {flex: 1;padding-left: 15%;color: #000000;}.comment_like {text-align: right;margin-right: 15rpx;.icon-dianzan {}}}}}}
</style>四、实现下载图片到本地功能
一、uniapp项目（封装异步请求、moment.js时间处理、封装手势滑动组件、下载图片到本地）相关推荐
- IOS开发基础之网易新闻环境搭建异步请求json，AFN网络封装第1天
IOS开发基础之网易新闻环境搭建异步请求json,AFN网络封装第1天 视频资料是2015年的,但是AFN是导入框架的关键文件,我尝试使用cocoapods安装最新的AFN,虽然成功了,但是版本太高, ...
- iOS 项目中 网络请求Alamofire 的二次封装
iOS 项目中 网络请求Alamofire 的二次封装 1.先创建 网络请求的工具类 NetWorkTool 继承自NSObject class NetWorkTool: NSObject {} 2. ...
- 学习使用js实现下载图片到本地电脑的教程
学习使用js实现下载图片到本地电脑的教程 html代码 js核心代码 html代码 <a href="qipa250.jpg" download="imgxia&q ...
- uni-app H5下载图片到本地
最近在h5出现几个莫名其妙的问题h5不能用a标签直接下载到本地, 百度的来的方法其实并不管用,只能用来预览,并不能真实的去下载,研究了很久发现uniapp可以吧网络图片下载下来然后存一个临时地址,再保 ...
- 源生ajax同步异步请求,源生JS怎样实现文件异步上传
这次给大家带来源生JS怎样实现文件异步上传,源生JS实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下. 名称 文件 确定 function ajaxUploadFile() { var ...
- js兼容IE下载图片在本地
$("#tab1").bindChildEvent("#download",function(){var imgPathURL=$("#div_edi ...
- JS下载图片到本地，解决跨域问题
说下需求,点击按钮,实现下载图片到本地的功能,后台返回的url是阿里oss存储图片的地址,一开始只能预览图片,再后来受同源策略影响,依旧不能实现,但是在生成的图片后拼接?time=当前时间戳就可以实现 ...
- html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- Ajax异步请求方法(详细)
使用ajax发送异步请求 原生js实现以及jquery ajax实现发送请求 文章目录 使用ajax发送异步请求 简介 实现方式 1.原生js实现 1.get请求 2.post请求 2.jquery ...
最新文章
- 任意排列、组合终极Shell脚本
- 浅谈电子政务门户建设选型经验
- Windows2012使用笔记
- jsp访问WEB-INF下面的资源
- android udp定时发送,Android Socket基于UDP协议通信
- pythonc语言结构_C语言结构体笔记
- 2019-11-09 正定矩阵的一些常见概念
- 实验5_JPEG解码
- SDNU 1467.杨辉三角形（水题）
- 白鹭引擎 - 显示对象的基准点与横纵坐标 ( 绘制一个来回移动的绿色方块 )
- 10分钟用python编写贪吃蛇小游戏_牛得一批！10分钟用Python编写一个贪吃蛇小游戏...
- 树莓派智能小车python_人工智能-树莓派小车（1）——DuerOS语音唤醒
- Java 根据 Map 的 key 的 ASCII 码从小到大排序
- Qt moc文件缺少“stdafx.h”异常
- 转：读“DataBase Sharding at Netlog”，看DataBase Scale Out
- 盐（salt value）密码学
- 理解 BLS 签名算法
- 百度EasyDL图像分类的使用
- 【R语言】多模型综合——CLS（GRS）加权平均法的实现
- 台积电5nm光刻技术