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

蔚落 2023-03-13 06:51 37阅读 0赞

# 分页功能分析 #

## 上拉加载 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(){ 
          
      },

![在这里插入图片描述][20200513170440554.png]

# 轮播图 #

**swiper**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]  
**在轮播图中图片等比例缩放解决方案：**

*  根据数据图片的宽高算出比例 宽/高 例如 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">
        
        <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"></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>

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

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

**使用： 在使用的页面导入**

import module from "module";

1.  this.hots=\[…this.hots,…result.res.vertical\];  
    es6 写法 同过扩展运算符 实现 数组之间的拼接
2.  判断对象有无数据
    
    if(Object.keys(this.album).length===0)\{  
    this.album=result.res.album;  
    \}
3.  父组件传子组件  
    父组件：

<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);
        },
    
    }

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

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

父组件

<swiper-action @swiperAction="handleSwiperAction">
            <image  :src="imgDetail.newimg"></image>
        </swiper-action>
    
    
    js:
    methods: { 
    handleSwiperAction(e){ 
    console.log(e)  //获取子组件的数值
    }
    
    }

1.  全局数据  
    定义全局数据

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

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

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

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

1.  共同用一个组件的时候 组件切换 数据改变 挂载重新执行 加载数据时 可以用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
          });
        }
      }
    };

[20200513170440554.png]: /images/20230312/d14ebf10a07d400ba0ddeb0f1d0eb1f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20230312/93b147d21ac54614a174a3fa6516ea4f.png