uni-app看图项目开发中遇到的小问题/知识点(持续更新)

一.若后台返回的数据带如/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看图项目开发中遇到的小问题/知识点(持续更新)相关推荐

Cocos2d-JS开发中的一些小技巧（持续更新）
1.获取URL中的请求参数的值----此方法接收参数名 1 2 3 4 5 6 function getQueryString(name) { var reg = new RegExp(&qu ...
MVC项目开发中那些用到的知识点(Asp.Net Mvc3.0 Areas)
前言我们知道MVC项目各部分职责比较清晰,相比较ASP.NET Webform而言,MVC项目的业务逻辑和页面展现较好地分离开来,这样的做法有许多优点,比如可测试,易扩展等等.但是在实际的开发中,随 ...
个人在 laravel 开发中使用到的一些技巧(持续更新)
1.更高效率地查询:使用批量查询代替 foreach 查询(多次 io 操作转换为一次 io操作) 如果想要查看更详尽的介绍,可以看看这篇文章什么是 N+1 问题,以及如何解决 Laravel 的 ...
透过NpetShop 看Web项目开发中的分工合作
以前做项目基本上是从数据库设计到web页面的制作都是一个人来做,甚至做着做着会觉得好乱的感觉. 后来是几个人一起做,开发的模式是一个人负责一部分项目的一部分,这里的分工是纵向的,即一个人要完成这一个部 ...
项目开发中遇到的小问题及小规范
1:命名问题文件夹,类,属性,方法,ACTION层,SERVER层,DAO层,JSP页面,JS方法,CSS文件,图片的文件等等,都要有一定的规律目的:易查找,易维护,易管理,不仅仅开发者自己能很好 ...
MVC项目开发中那些用到的知识点(MVC IModelBinder)
前言本节主要来记录一下客户端发送请求的参数自动绑定为强类型的成员属性或方法参数也就是Model的绑定体现在从当前请求提取相应的数据绑定到目标Action方法的参数. IModelBinder 用于进 ...
MVC项目开发中那些用到的知识点(登录权限认证)
话说从开始接触MVC到现在也有一段时间了,记得好像是从2012年8月初开始做项目的.就记录一下自己所用到的且认为重要的知识点吧. 首先做的便是一个登录,那么就用到了登录权限认证: public cla ...
React-Native开发中常用的第三方控件持续更新
2023.03.22更新 React Native ECharts 项目是一个开源的库,用于在 React Native 应用程序中创建交互式图表.通过用户友好的设计和简单的 API,开发者可以创建各 ...
【STM32开发中遇到的一些问题(会持续更新......)】
1.STM32添加固件库编译时没有生成对应的.h文件原因是添加了的固件库,没有使能.在工程中找到py32f0xx_hal_conf.h,将需要的功能取消注释即可. 2.Keil编译出现error: ...

uni-app看图项目开发中遇到的小问题/知识点(持续更新)

uni-app看图项目开发中遇到的小问题/知识点(持续更新)相关推荐

最新文章

热门文章