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">
   <image
   mode="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"
/>