一、封裝異步請求：

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时间处理、封装手势滑动组件、下载图片到本地）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。