08-小程序(搜索列表上拉下拉, image的mode属性,git冲突的解决, Tabbar页与页面栈,uniapp生命周期,场景值,uniapp中用字体图标)

于 2020-07-07 21:17:53 发布
阅读量517 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tangoneone/article/details/107187923
版权

01-image mode属性（了解）

传送门

图片裁剪、缩放的模式。

学习时可以类比于css background-size:cover,contain

  1. scaleToFill不保持纵横比，短边拉伸
  2. aspectFit 保持纵横比，长边显示，短边留空
  3. aspectFill保持纵横比，短边显示，长边截取
  4. widthFix保持纵横比,宽度不变，高度自动变化

在这里插入图片描述

注意点：
  1. 如果图片显示的区域的纵横比和原图片是一致，不管用什么模式都是一样的效果
  2. 设计稿的图片宽高尽量要和后端返回的图片宽高的比例保持一致

02-搜索列表-输入框输入触发搜索

  1. 输入框键盘类型
    1. confirm-type=" search "
  2. 输入框输入内容，点击右下角按钮时，触发关键字搜索（搜索第一页），清空原来的列表
    1. v-model:keyword用来获取内容
    2. 点击右下角按钮时，触发关键字搜索(搜索第一页）
      1. @confirm:search方法
      2. search的逻辑，pageNum:1, 清空goodsList，并查询商品列表
  3. 下拉刷新和输入框触发搜索的逻辑完全一致
    1. 抽取一个公共的方法reload

03-搜索列表-请求不需要loading

  1. 分页的场景一般无须中央的loading

  2. 在queryGoodsList,里面传参isLoading:false

  3. 在公共请求方法里面替换掉BASE_URL

    const BASE_URL = 'https://api-ugo-dev.itheima.net'
    1. 需要在搜索列表页面，图片的属性修改为goods_small_logo

04-搜索列表-请求中，不再发请求

  1. 补充：运行到内置浏览器时，下拉动画一直都在; 微信开发者工具，下拉动画时间太长

    1. 请求结束后，主动停止下拉动画
      1. wx.stopPullDownRefresh

  2. 现象：下拉刷新，还在Loading中，就可以发请求

  3. 解决方法：

    1. 设置data属性为isRequesting:false
    2. 请求前，判断如果状态是请求中，返回
    3. 进入请求前，设置状态为请求中
    4. 结束请求后，设置状态为请求结束

  4. 注意点

    1. 先判断是否在请求中，再进入请求后，设置请求中的状态

    2. 如以下的代码，顺序反的话，总是return

      // 进入请求前,设置状态为,请求中
this.isRequesting = true
// 请求前,判断.如果在请求中,就返回
if(this.isRequesting){
    return
}

05- 搜索列表-如果已经到最后一页，没必要再发请求

  1. 现象：已经到了最后一页，上拉时依然会触发发请求，请求回来的数据空的。

  2. 解决方案：

    1. 到最后一页，后续的请求不必发了

      1. 如何判断是否到最后一页了？

        1. 方案

          1. 如果返回数据是空的。还是多发一次请求

          2. 判断返回数据长度<PageSize

            1. 如果最后一页长度和pagesize相等，也会多发一条

          3. total和列表总长度对比（最优的）

            // 列表长度和total对比
if(data.total<=this.goodsList.length){
    this.isLastPage = true
}

      2. 设置data属性isLastPage

      3. 在请求前判断，如果是最后一页就不发请求

06- 搜索列表-最后一页提示

  1. 先添加样式
  2. 如果是最后一页，显示对应的提示
注意点：

  1. uniapp里面v-show支持得不好

    v-show="categoryList.length"

07-搜索列表-搜索和过滤栏固定定位

onPageScroll

  1. 先用样式把搜索和过滤栏固定
    1. 用view把搜索和过滤栏包裹起来
    2. 定位用fixed，相于对屏幕，不是相对于滚动的盒子。不能用absolute
.top-header {
	position: fixed;
	width: 100%;
	background-color: #fff;
	top: 0;
}
.goods-list {
	margin-top: 220rpx;
}
  1. 下拉时，下拉动画被遮住了
    1. 下拉时，把.top-header的定位改回static
  2. 经过第2步的分析，方案
    1. 设置data属性isFixed:false/true
    2. 下拉时，设置isFixed:false
    3. 不下拉时，设置isFixed:true
      1. 监听页面滚动onPageScroll
    4. 结构中根据isFixed来设置样式

08-搜索列表-删除部分data属性

  1. 在结构中使用的变量，都应该是data属性

  2. 不在结构中使用的变量，不应该声明为data属性

    1. 为什么呢？Vue监听data属性是耗性能

    2. 那变量声明哪里呢？

      1. 声明在vue外边

        const PAGE_SIZE = 6;
export default {

      2. 添加为Vue实例的属性

        onLoad(options) {
    // Vue实例添加属性
    this.pageNum = 1;
},

  3. 确认一下data属性里面哪一些属性并没有在结构中使用

    1. pageNum
    2. isRequesting

09-搜索列表-搜索和过滤栏固定定位-sticky方案

  1. sticky

    1. 相对于滚动的父DOM
    2. 定位，可以使有left,top,bottom,right

  2. 确认兼容性

    1. caniuse网站

  3. 使用

    .top-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
}

10-git冲突的解决

  1. 何时出现git冲突

    1. 当git无法判断使用哪一段代码的时候

    2. 具体场景

      1. 在本地回滚提交，再提次，本地提交和回滚前的提交有相同文件的改动
      2. 两个程序员修改同一文件，后推送代码的人就会冲突

    3. 如何解决

      1. git pull

      2. 然后解决冲突

        1. 用别人的代码，删除自己的
        2. 用自己的代码，删除掉别人的（需要沟通）
        3. 两者都用（需要沟通的）

      3. 再提交推送

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

注意点：

  1. 可以利用vscode来解决冲突
    在这里插入图片描述

  2. 解决完冲突后，依然需要git add., git commit,git push

  3. 最终的代码不能出现<<<<,====

11-搜索列表-自测

为什么要自测？

  1. 有些时候程序员比测试更容易发现bug
  2. 程序员自测才能让自己更专业

如何自测？一般都按照功能来自测

  1. 从三级分类带上三级分类名跳转到搜索列表页，输入框显示三级分类名，同时列表显示keyword搜索的第一页数据
    1. 分类页面vfor嵌套不要用相同的下标名
  2. 输入框输入内容，列表的数据为输入框内容搜索的第一页数据
    1. isLastPage需要重置为false
  3. 下拉刷新：按之前的关键字进行搜索，列表的数据为输入框内容搜索的第一页数据
    1. isLastPage需要重置为false
  4. 上拉加载：按之前的关键字，pageNum++,追加数据，到最后一页，就不再发请求
注意点：
  1. 微信开发者工具，模拟器输入框可能无法输入中文。用手机扫码预览是没有问题，忽略。

12-非Tabbar页与页面栈

页面栈

概念
  1. 存放所有的页面的栈，先进后出
    1. 举例A->B->C，
      在这里插入图片描述
如何查看

方法getCurrentPages

在这里插入图片描述

有什么用
  1. 方便理解页面路由，A打开B，B入栈，A隐藏，B初始化
  2. B返回A, B销毁并出栈，A显示的

13-Tabbar页与页面栈

传送门

tab栏的作用

为应用提供多入口的

tabbar特点：

  1. 页面栈是存放所有的具有返回关系的页面
  2. AppData里面可以看到所有活动的页面路径
  3. 同一时间只有一个tabbar页面会入栈
  4. switchTab跳转到tabbar页面，销毁所有非tabbar页面

总结：非tabbar页面，打开就入栈，返回就出栈销毁。tabbar切换就入栈/出栈，并不会销毁

14-场景值

传送门

概念

小程序的入口

使用方法
 onShow: function (options) {
    console.log('场景值: '+options.scene)
  },
作用
  1. 获取小程序入口
  2. 事件上报，统计哪种小程序入口更有效
扩展：事件上报
  1. PV 页面一天被访问的次数
    1. 每次页面被访问时，告诉后端页面url即可
  2. UV 页面一天被多少用户访问
    1. 每次页面被访问时，告诉后端页面url，还有uid
  3. 点击流 某个button，某个image一天被点击的次数
    1. 给目标dom一个唯一标识，每次被点时，告诉后端即可
    2. dom一个唯一标识就是埋点
注意点
  1. 事件上报就是给后端发请求
    1. 接口
    2. new Image().src="url"是跨域

15-uniapp生命周期

uniapp的生命周期

  1. 应用的生命周期和微信小程序完全一致
  2. 页面的生命周期和微信小程序完全一致
  3. 组件的生命周期和Vue完全一致,不要使用onLoad…

16-字体图标

阿里矢量图标库

以项目方式管理图标

  1. 先在图标库找到图标，加入购物车
  2. 创建项目，图标加入到项目
  3. 生成链接
注意点:
  1. import不支持网络路径
    //把生成的css单独建立一个文件并复制到里面,然后在app.vue 导入字体图标的这个css文件
    @import url("./css/iconfont.css");
大力99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值