开发上拉加载mixins

api/works.js

@@ -0,0 +1,7 @@
+import {
+    request
+} from "../utils/request";
+module.exports = {
+    // 获取优秀作品展播列表
+    getHotrecommendList: data => request('/userRead/recommend', 'get', data),
+}

app.js

@@ -1,74 +1,74 @@
 // app.js
 import {
-  userLogin
+    userLogin
 } from '~/api/user'
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 let storeBindings
 App({
-  onLaunch() {
-    this.checkIsIos()
-    this.getNavbarInfo()
-  },
-  async onShow(options) {
-    let shareUid = options.query.uid
-    this.login(shareUid)
-  },
-  login(shareUid) {
-    this.storeBindings = createStoreBindings(this, {
-      store,
-      actions: ['setUser']
-    })
-    wx.login({
-      success: async (res) => {
-        if (res.code) {
-          // 获取openid
-          let data = {
-            code: res.code,
-            shareUid
-          }
-          let userRes = await userLogin(data)
-          this.setUser(userRes.data)
-          wx.setStorageSync('uid', userRes.data.uid)
-          wx.setStorageSync('user', userRes.data)
-          this.globalData.userInfo = userRes.data
-          if (getApp().callBack) {
-            getApp().callBack(userRes);
-          }
-        }
-      }
-    })
-  },
-  checkIsIos: function () {
-    wx.getSystemInfo({
-      success: (res) => {
-        if (res.system.search('iOS') != -1) {
-          this.globalData.isIOS = true
-        }
-      }
-    })
-  },
-  getNavbarInfo() {
-    // 获取系统信息
-    const systemInfo = wx.getSystemInfoSync();
-    // 胶囊按钮位置信息
-    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
-    // 导航栏高度 = 状态栏高度 + 44
-    this.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
-    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
-    this.globalData.menuTop = menuButtonInfo.top;
-    this.globalData.menuHeight = menuButtonInfo.height;
-  },
-  globalData: {
-    userInfo: null,
-    isIOS: false, // 判断设备是否为苹果
-    navBarHeight: 0, // 导航栏高度
-    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
-    menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
-    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
-  }
+    onLaunch() {
+        this.checkIsIos()
+        this.getNavbarInfo()
+    },
+    async onShow(options) {
+        let shareUid = options.query.uid
+        this.login(shareUid)
+    },
+    login(shareUid) {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            actions: ['setUser']
+        })
+        wx.login({
+            success: async (res) => {
+                if (res.code) {
+                    // 获取openid
+                    let data = {
+                        code: res.code,
+                        shareUid
+                    }
+                    let userRes = await userLogin(data)
+                    this.setUser(userRes.data)
+                    wx.setStorageSync('uid', userRes.data.uid)
+                    wx.setStorageSync('user', userRes.data)
+                    this.globalData.userInfo = userRes.data
+                    if (getApp().callBack) {
+                        getApp().callBack(userRes);
+                    }
+                }
+            }
+        })
+    },
+    checkIsIos: function () {
+        wx.getSystemInfo({
+            success: (res) => {
+                if (res.system.search('iOS') != -1) {
+                    this.globalData.isIOS = true
+                }
+            }
+        })
+    },
+    getNavbarInfo() {
+        // 获取系统信息
+        const systemInfo = wx.getSystemInfoSync();
+        // 胶囊按钮位置信息
+        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+        // 导航栏高度 = 状态栏高度 + 44
+        this.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
+        this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
+        this.globalData.menuTop = menuButtonInfo.top;
+        this.globalData.menuHeight = menuButtonInfo.height;
+    },
+    globalData: {
+        userInfo: null,
+        isIOS: false, // 判断设备是否为苹果
+        navBarHeight: 0, // 导航栏高度
+        menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
+        menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
+        menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+    }
 })

components/worksList/index.js

@@ -1,23 +1,17 @@
-// components/worksList/index.js
+import behavior from '~/mixins/video'
 Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
+    behaviors: [behavior],
+    properties: {
+        worksList: {
+            type: Array,
+            value: []
+        }
+    },
+    data: {
+     
+    },
+    methods: {
 
-  },
+    },
 
-  /**
-   * 组件的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-
-  }
-})
+})

components/worksList/index.json

@@ -1,4 +1,6 @@
 {
-  "component": true,
-  "usingComponents": {}
+    "component": true,
+    "usingComponents": {
+        "videoPreview": "/components/videoPreview/index"
+    }
 }

components/worksList/index.less

@@ -1 +1 @@
-/* components/worksList/index.wxss */
+.worksList {}

components/worksList/index.wxml

@@ -1,2 +1,7 @@
-<!--components/worksList/index.wxml-->
-<text>components/worksList/index.wxml</text>
+<view class="worksList">
+    <videoPreview wx:for="{{worksList}}" wx:key="index" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}"
+        data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:openComment="openComment">
+    </videoPreview>
+    <!-- <Comment id="comment" /> -->
+    <canvas id='share' type="2d"> </canvas>
+</view>

components/worksList/index.wxss

@@ -1 +0,0 @@
-/* components/worksList/index.wxss */

mixins/reachBottom.js

@@ -0,0 +1,59 @@
+module.exports = Behavior({
+    data: {
+        loading: false, // 加载状态标志位
+        list: [],
+        grade: '',
+        pageNo: 1,
+        pageSize: 20,
+        totalSize: 0,
+        noMoreData: false, // 无更多数据置为 false
+    },
+    methods: {
+        async getData(fn, args) {
+            if (this.data.noMoreData) {
+                return
+            }
+            let params = {
+                pageNo: this.data.pageNo,
+                pageSize: 20,
+                ...args
+            }
+            // 加载状态，用于页面中控制加载动画的显示
+            this.setData({
+                loading: true
+            })
+            let {
+                list,
+                totalSize
+            } = await fn(params).finally(() => {
+                // 页面渲染完成后关闭加载动画字段
+                wx.nextTick(() => {
+                    this.setData({
+                        loading: false
+                    })
+                });
+            })
+            list = [...this.data.list, ...list]
+            console.log(list,
+                totalSize);
+            this.setData({
+                pageNo: ++this.data.pageNo,
+                list,
+                totalSize,
+                noMoreData: list.length >= totalSize
+            })
+
+        },
+        resetData() {
+            if (this.data.loading) return; // 如果接口已经在请求中，则不重置数据，防止用户持续下拉刷新
+            this.setData({
+                loading: false,
+                list: [],
+                pageNo: 1,
+                totalSize: 0,
+                noMoreData: true,
+            })
+            this.loadMore(); // 调用页面中的接口请求方法
+        },
+    },
+})

pages/index/index.js

@@ -1,5 +1,16 @@
+const app = getApp()
+import {
+    getHotrecommendList
+} from "~/api/works"
+import reachBottom from '~/mixins/reachBottom'
+import {
+    createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+    store
+} from '~/store/index'
 Page({
-
+    behaviors: [reachBottom],
     /**
      * 页面的初始数据
      */
@@ -7,7 +18,6 @@ Page({
         background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
         currentType: '1'
     },
-
     /**
      * 生命周期函数--监听页面加载
      */
@@ -17,6 +27,28 @@ Page({
                 selected: 1
             })
         }
+        getApp().callBack = (res) => {
+            this.storeBindings = createStoreBindings(this, {
+                store,
+                fields: {
+                    userInfo: 'userInfo'
+                },
+            })
+            this.storeBindings.updateStoreBindings()
+            this.loadMore()
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+    loadMore() {
+        this.getData(getHotrecommendList, {
+            grade: this.data.userInfo.grade
+        })
+    },
+    onReachBottom() {
+        console.log('触底');
+        this.loadMore()
     },
     selectType({
         target
@@ -26,5 +58,6 @@ Page({
                 currentType: target.dataset.type
             })
         }
-    }
+    },
+
 })

pages/index/index.wxml

@@ -30,4 +30,6 @@
         <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
         <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
     </view>
+    <!-- 优秀作品展播及官方推荐列表组件 -->
+    <worksList id="worksList" worksList="{{list}}" />
 </view>

pages/my/index.wxml

@@ -45,7 +45,7 @@
             <image class="img" src="/static/concern.png" mode="" />
             <text class="title">我的关注</text>
         </view>
-        <view class="sBox" bindtap='jump' data-url="/pages/mycollection/mycollection?title=我的收藏">
+        <view class="sBox" bindtap='jump' data-url="/pages/collection/index">
             <image class="img" src="/static/collect.png" mode="" />
             <text class="title">我的收藏</text>
         </view>
@@ -141,8 +141,8 @@
             </view>
         </view>
     </view>
-    <view class="seat"> 
-        
+    <view class="seat">
+
     </view>
 </view>
 <!-- 广告组件 -->