小程序······uni-app框架项目-----------2

分页功能分析

上拉加载 1

• 使用 scroll-view 标签充当分页容器 实现吸顶灯效果
  必须添加一个高度： 如果和弹性布局混用（display: flex;）需要在标签属性添加enable-flex

html
必须添加属性 scroll-y
 <scroll-view scroll-y  enable-flex class="recommends_view"</scroll-view>
css
.recommends_view{
  //height 屏幕高度-头部标题高度   100%===100vh
  height:calc(100vh - 36px);
}

calc（）函数用于动态计算长度值:
注意：

1. 需要注意的是，*运算符前后都需要保留一个空格，*例如：width: calc(100% - 10px)；
2. 任何长度值都可以使用calc（）函数进行计算；
3. calc（）函数支持“ +”，“-”，“ *”，“ /”运算；
4. calc（）函数使用标准的数学运算优先级规则；

• 绑定滚动条触底事件 scrolltolower

html
必须添加属性 scroll-y
 <scroll-view scroll-y @scrolltolower="handleToLower" class="recommends_view"</scroll-view>
js
  methods: {
     handleToLower(){
        //判断是否有数据
        if(this.hasMore){
          this.params.skip+=this.params.limit;
          this.getList();
        }else{
          //提示效果
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
        }
    }
  },

实现分页逻辑代码

<template>
  <scroll-view scroll-y enable-flex @scrolltolower="handleToLower" class="video_main" >
      <!-- 循环数据  驱动页面显示 -->
      <view class="video_item"
      v-for="item in videowp"
      :key="item.id"
      
      >
        <image mode="widthFix" :src="item.img"></image>
      </view>

  </scroll-view>
</template>

<script>
export default {
  props: {
    urlobj: Object
  },
  data() {
    return {
   videowp:[],
   hasMore:true
    };
  },
  //监听数据的变化重新挂载数据
  watch: {
    urlobj() {
         //切换标题的时候需要清空数组
        this.videowp=[];
      //数据发生改变时  请求数据
      this.getList();
    }
  },
  mounted() {
    console.log(this.urlobj);
    //挂载完成时请求数据
    this.getList();
  },
  methods: {
    //发送请求获取数据的函数
    async getList() {
      let rs = await this.http({
        url: this.urlobj.url,
        data: this.urlobj.params
      })
        if (rs.res.videowp.length===0) {
         this.hasMore=false;
                   //提示效果
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
         return;
       }
      this.videowp=[...this.videowp,...rs.res.videowp]
      
    },
    handleToLower(){
        //判断是否有数据   urlobj数据有  watch监听 
        if(this.hasMore){
          this.urlobj.params.skip+=this.urlobj.params.limit;
          this.getList();
        }else{
          //提示效果
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
        }
    
    }

  }
};
</script>

<style lang="scss" scoped>

.video_main{
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 36px);
    .video_item{
        width: 33.33%;

        image{
            border: 5rpx solid #fff;
        }
    }
}
</style>

小结

1. hasMore:true 控制数据是否有 添加提示
2. this.videowp=[…this.videowp,…rs.res.videowp] 扩展数据 每次加载下一页进行数据拼接
3. 切换标题的时候需要清空数组 因为切换在父组件 所以 在检测到变化的时候 可以进行清空数组

    watch: {
    urlobj() {
        //切换标题的时候需要清空数组
        this.videowp=[];
      //数据发生改变时  请求数据
      
      this.getList();
    }
  },

上拉加载2

与data 同级

  onReachBottom(){
      
  },

轮播图

swiper

在轮播图中图片等比例缩放解决方案：

• 根据数据图片的宽高算出比例 宽/高 例如 img （640*284）
  则比例为 640/284≈2.3

• 小程序的基本高度为750rpx

• 则在scc样式中计算：

swiper{
height:calc(750rpx / 2.3)
image{
  height: 100%;
}
}

文字溢出处理 给文字标签添加
注意 用flex 布局的时候需要给 父容器添加 overflow: hidden;

   text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

滑动图片切换

封装手势滑动 进行数据切换

代码：

/*
实现  容器左右滑动
@touchstart="handleTouchstart"   手势按下
 @touchend="handleTouchend"    手势松开
 */
<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">
    <!-- 1    slot   2  对外提供数据  滑动的方向 -->
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //按下的时间
      startTime: 0,
      //按下的坐标
      startX: 0,
      startY: 0
    };
  },
  methods: {
    //用户按下屏幕
    handleTouchstart(e) {
      // 获取按下的的时间戳
      this.startTime = Date.now();
      //获取坐标
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },
    //用户松开
    handleTouchend(e) {
      //记录松开的时间
      const endTime = Date.now();
      //获取松开的坐标
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;
      //判断按下的时长  大于两秒 结束
      if (endTime - this.startTime > 2000) {
        return;
      }

      //滑动的方向   direction  储存方向值  right  left
      let direction = "";
      //判断合法距离
      if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) > 10) {

        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }

      //用户做了合法滑动规则   子组件向父组件传值 用自定义事件
      console.log(direction);
      this.$emit("swiperAction", { direction });
    }
  }
};
</script>

<style>
</style>

分段器

<template>
    <view>
    <view class="video_tab">
      <view class="video_tab_title">
        <view class="title_inner">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          ></uni-segmented-control>
        </view>
        <view class="iconfont iconsearch">&#xe6db;</view>
      </view>
      <view class="video_tab_content">
        <view v-show="current === 0">
          <home-recommend></home-recommend>
        </view>
        <view v-show="current === 1">
          <home-category></home-category>
        </view>
        <view v-show="current === 2">
          <home-new></home-new>
        </view>
        <view v-show="current === 3">
          <home-album></home-album>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";

export default {
  components: {
    uniSegmentedControl
  },
  data() {
    return {
      items: ["推荐", "娱乐", "最新", "热门","分类"],
      //模块的下标   0 推荐   1 分类  2最新  3专辑
      current: 0
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  }
};
</script>
<style lang="scss">
.video_tab {
  .video_tab_title {
    position: relative;
    .title_inner {
      width: 60%;
      margin: 0 auto;
    }
    .iconsearch {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
    }
  }
  .video tab_content {
  }
}
</style>

小知识点

1.小程序图片 属性

//高度自适应
<image mode="widthFix"></image>
//等比例拉伸 填充
<image mode="aspectFill"></image>

2. scope vue基础 style的作用域 仅在此页面
3. 将时间戳 改成 18号/月 使用第三方库 moment.js
   官方文档http://momentjs.cn/
   安装

npm install moment --save   # npm
yarn add moment             # Yarn

使用： 在使用的页面导入

import module from "module";

4. this.hots=[…this.hots,…result.res.vertical];
   es6 写法 同过扩展运算符 实现 数组之间的拼接

5. 判断对象有无数据

   if(Object.keys(this.album).length===0){
   this.album=result.res.album;
   }

6. 父组件传子组件
   父组件：

 <video-main :urlobj="{url:items[current].url,params:items[current].params}"></video-main>

子组件

export default {
    props: {
        urlobj:Object
    },
    mounted () {
    //相当于 data中的数据  需要用this获取
        console.log(this.urlobj);
    },

}

7. 子组件传父组件 使用事件
   子组件

 this.$emit("swiperAction", { direction });

父组件

 <swiper-action @swiperAction="handleSwiperAction">
        <image  :src="imgDetail.newimg"></image>
    </swiper-action>


js:
methods: {
handleSwiperAction(e){
console.log(e)  //获取子组件的数值
}

}

8. 全局数据
   定义全局数据

  getApp().globalData.imgList = this.list;
      getApp().globalData.imgIndex = this.index;

其他组件结构数据
非组件在onload函数 组件在
组件加载完毕就会触发

  mounted() {
    const {imgIndex}=getApp().globalData;
  },        

onLoad：{
  const {imgIndex}=getApp().globalData;
}

9. 共同用一个组件的时候 组件切换 数据改变 挂载重新执行 加载数据时 可以用watch函数监听变化重新挂载

export default {
//获取父组件传过来的数据   
    props: {
        urlobj:Object
    },
//监听组件的变化 重新挂载数据
    watch: {
        urlobj(){
            console.log(“urlobj数据发生了变化”)
        }
    },

}

props: {
    urlobj: Object
  },
  data() {
    return {
      url: value,
      parent: []
    };
  },
  //监听数据的变化重新挂载数据
  watch: {
    urlobj() {
      //数据发生改变时  请求数据
      this.getList();
    }
  },
  mounted() {
    console.log(this.urlobj);
    //挂载完成时请求数据
    this.getList();
  },
  methods: {
    //发送请求获取数据的函数
    async getList() {
      let rs = await this.http({
        url: this.urlobj.url,
        data: this.urlobj.params
      });
    }
  }
};