一.若后臺返回的數據帶如/d的換行字符，要用<text>標簽包裹

二.動態替換url中的id

data(){return{ id:0, } url=`/${this.id}/`

三.分頁的步驟

1.定于一個變量判斷是否還有數據

hasMore: true,

2.定于一個分頁事件

// 分頁事件handleScrolltolower() {if (this.hasMore) {this.urlobj.params.skip += this.urlobj.params.limit;this.getList();} else {uni.showToast({title: "沒有更多數據了",icon: "none",});}},

3.改造發送請求之后的代碼（寫在發送請求后面）

getList() {this.request({url: this.urlobj.url,data: this.urlobj.params,}).then((result) => {// console.log(result);if (result.res.videowp.length === 0) {this.hasMore = false;uni.showToast({title: "沒有更多數據了",icon: "none",});return;}this.videowp =[...this.videowp, ...result.res.videowp];});},

四、圖片地址動態拼接+替換末尾尺寸

<image:src="item.thumb+item.rule.replace('$<Height>',360)"mode="widthFix"/>

五、頁面圖片三列效果樣式代碼

.album_list {display: flex;// 自動換行flex-wrap:wrap;.album_item {width: 33.33%;border:3rpx solid #fff;image: {}} }

六、組件開發步驟

1.新建子組件頁面

<template><view>組件<slot></slot></view> </template><script> export default {props: {list: Array,index: Number,}, }; </script><style lang="scss" scoped></style>

2.父組件頁面

? 引入

import goDetail from "@/components/goDetail";

?注冊

components: {goDetail,},

使用

<go-detail :list="mothes.items" :index="index"><imagemode="aspectFill":src="item.img + item.rule.replace('$<Height>', 360)"/> </go-detail>

效果

七、xxx年前實現步驟

import moment from "moment"; onLoad() {this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow(); }, import moment from "moment";// 設置語言為中文 moment.locale("zh-cn");export default { <view class="user_time">{{ imgDetail.cnTime }}</view>

八、判斷鼠標移動

<template><div @touchstart="handleTouchstrat" @touchend="handleTouchend"></div> </template><script> export default {data() {return {// 按下時間startTime: 0,// 按下坐標startX: 0,startY: 0,};},methods: {handleTouchstrat(event) {this.startTime = Date.now();this.startX = event.changedTouches[0].clientX;this.startY = event.changedTouches[0].clientY;},handleTouchend(event) {const endTime = Date.now();const endX = event.changedTouches[0].clientX;const 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 lang="scss" scoped> view {width: 100%;height: 500rpx;background: aqua; } </style>

九、后臺返回的圖片格式不一致可以頂寬定高，圖片渲染模式為

<image:src="item.thumb + item.rule.replace('$<Height>', 360)"mode="aspectFill" />

?

總結

以上是生活随笔為你收集整理的uni-app看图项目开发中遇到的小问题/知识点(持续更新)的全部內容，希望文章能夠幫你解決所遇到的問題。

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