uniApp开发小程序(7)使用mescroll配置上啦下拉的样式，以及分类页面的配置

使用第三方 mescroll 下拉刷新组件，使用【wxs+renderjs实现】高性能的下拉刷新上拉加载组件。支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动。
mescroll 官网
组件案例

弹出窗口，将插件导入项目

导入之后项目会多出一个uni_mudules文件夹，显示了则导入成功

1、mescroll 下拉刷新组件

由于现在导入的时候，官网去除了插件之前的配置，所以下面的1,2只适用于1.3.5之前的版本

1、在项目中导入插件
2、在main.js中全局引入组件

 // 在main.js注册mescroll-body的全局组件 (mescroll-uni用的比较少,且遵循 easycom 规范,会自动按需引入)import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"Vue.component('mescroll-body', MescrollBody)

3、在pages.json中配置信息

主要是在style里面配置disableScroll和enablePullDownRefresh，关闭原生页面滚动和关闭系统下拉刷新

"disableScroll": false, //删除此项: mescroll-body必须允许原生页面滚动, 默认false
"enablePullDownRefresh" : false, //删除此项: 不开启系统自带的下拉刷新, 默认false

下拉无法刷新的问题

1、配置的条数不够，无法到达刷新的需求，可以在data中配置条数

upOption: {auto: false, // 不自动加载page: {num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 6 // 每页数据的数量},// noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5empty: {tip: '~ 空空如也 ~', // 提示btnText: '去看看'}},

2、也就是我遇到的问题，页面加载数据并循环的items，没有设置绝对高度，比如height:100rpx

二、作为子页面（在pages.json）使用

参考官方案例

<template><mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"><view class="notice">本Demo的下拉刷新: 添加新数据到列表顶部</view><view class="news-li" v-for="news in dataList" :key="news.id"><view>{{news.title}}</view><view class="new-content">{{news.content}}</view></view></mescroll-body>
</template><script>import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import {apiNewList} from "@/api/mock.js"export default {mixins: [MescrollMixin], // 使用mixindata() {return {downOption: {auto: false //是否在初始化后,自动执行downCallback; 默认true},dataList: []}},methods: {/*下拉刷新的回调 */downCallback() {//联网加载数据apiNewList().then(data => {//联网成功的回调,隐藏下拉刷新的状态this.mescroll.endSuccess();//设置列表数据this.dataList.unshift(data[0]);}).catch(()=>{//联网失败的回调,隐藏下拉刷新的状态this.mescroll.endErr();})},/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */upCallback(page) {//联网加载数据apiNewList(page.num, page.size).then(curPageData=>{//联网成功的回调,隐藏下拉刷新和上拉加载的状态;//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;//方法一(推荐): 后台接口有返回列表的总页数 totalPage//this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)//方法二(推荐): 后台接口有返回列表的总数据量 totalSize//this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)//方法三(推荐): 您有其他方式知道是否有下一页 hasNext//this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.this.mescroll.endSuccess(curPageData.length);//设置列表数据this.dataList=this.dataList.concat(curPageData);}).catch(()=>{//联网失败, 结束加载this.mescroll.endErr();})}}}
</script><style>/*说明*/.notice{font-size: 30upx;padding: 40upx 0;border-bottom: 1upx solid #eee;text-align: center;}/*展示上拉加载的数据列表*/.news-li{font-size: 32upx;padding: 32upx;border-bottom: 1upx solid #eee;}.news-li .new-content{font-size: 28upx;margin-top: 10upx;margin-left: 20upx;color: #666;}
</style>

1、必须引入MescrollMixin

 import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";export default {mixins: [MescrollMixin], // 使用mixin

2、配置downOption，或者upOption主要是一些参数

downOption: {auto: false //是否在初始化后,自动执行downCallback; 默认true},

3、配置mescroll-body，前面参数可以不改，但是最后一个@up=“upCallback”，必须在methods中申明出来，这个是下拉刷新使用的，以及上拉加载触发的方法

 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"></mescroll-body>

4、在upCallback中写刷新的方法，以及数组拼接方法，并将数组赋值并循环出数据

<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"><view class="notice">本Demo的下拉刷新: 添加新数据到列表顶部</view><!-- <view class="news-li" v-for="(news,int) in list" :key="int"><view>{{news.cpName}}</view><view class="new-content">{{int}}</view></view> --><risk-item v-for="(item,i) in list" :key="i" :riskItem="item" :tabIndex="tabIndex" :ind="i"></risk-item></mescroll-body>

三、一个页面使用多个下拉刷新组件

参考官网这个例子

我写的页面如下

<template><view><!-- <view class="tip">每个菜单列表仅初始化一次,切换菜单缓存数据</view> --><!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 --><tab-bar v-model="tabIndex"></tab-bar><uni-search-bar :focus="focus" radius="10" placeholder="请输入你搜索的企业" clearButton="auto" cancelButton="always"@confirm="doSearch" @cancel="navBack()" ref='searchBar'></uni-search-bar><!--   <view class="itemTwo"><view v-for="i in 40">{{i}}</view></view> --><!-- <div id="mescroll" class="mescroll" style="height: 400px;"> --><risk-list ref="mescrollItem0" :i="0" :index="tabIndex" :tabIndex="tabIndex"></risk-list><!-- </div> --><hidden-list ref="mescrollItem1" :i="1" :index="tabIndex" :tabIndex="tabIndex"></hidden-list><!-- <risk-list2 style="height: 100px;"></risk-list2> --></view>
</template><script>import tabBar from "./components/tab_bar.vue"import riskList from "./components/riskList.vue"import hiddenList from "./components/hiddenList.vue"import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";export default {mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期data() {return {tabIndex: 0,focus: false}},components: {tabBar,riskList,hiddenList},onNavigationBarButtonTap(e) {this.navBack()},onNavigationBarButtonTap(e) {if (e.index === 0) {if (this.tabIndex == 0) {console.log("点击了风险工单")this.navTo(`/pages/message/components/test/test`)} else {// this.navTo(`/pages/message/components/`)}}},methods: {doSearch(val) {console.log(val.value)}}}
</script><style>.top-warp {z-index: 9990;position: fixed;top: --window-top;/* css变量 */left: 0;width: 100%;height: 120upx;background-color: white;}.top-warp .tip {font-size: 28upx;height: 60upx;line-height: 60upx;text-align: center;}
</style>

下拉有个首部置顶，下面距离多少下拉，使用 top="90"距离上面多少下拉

     <view class="vuu"><videoDisposalHeader @typeFrom="typeFrom" /></view><mescroll-body ref="mescrollRef"  top="90" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"@up="upCallback" :style="{height: swiperHeight + 'px'}"><videoDisposal v-for="(item, i) in itemList" :key="i" :item="item" /></mescroll-body>//首部置顶
.vuu {z-index: 9990;position: fixed;top: --window-top;/* css变量 */left: 0;width: 100%;height: 100upx;background-color: white;}

1、必须首页面加入下面参数

import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";export default {mixins: [MescrollMoreMixin],

2、引入需要加载的子页面

<risk-list ref="mescrollItem0" :i="0" :index="tabIndex" :tabIndex="tabIndex"></risk-list>
<hidden-list ref="mescrollItem1" :i="1" :index="tabIndex" :tabIndex="tabIndex"></hidden-list>

3、子页面通过传递的参数i进行渲染，

<view v-show="i === index"><!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 --><!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") --><mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" :down="downOption" @down="downCallback":up="upOption" @up="upCallback" @emptyclick="emptyClick"><!-- 数据列表 --><view  style="margin-top: 10rpx;"><risk-item v-for="(item,i) in list" :key="i" :riskItem="item" :tabIndex="tabIndex" :ind="i"></risk-item></view></mescroll-body></view>

4、子页面必须引入的参数为

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";export default {mixins: [MescrollMixin, MescrollMoreItemMixin],

四、页面使用下拉刷新插件

1、使用mescroll-body 标签包含需要下拉的组件

<mescroll-body r
ef="mescrollRef"
@init="mescrollInit"@down="downCallback" @up="upCallback" :down="downOption":up="upOption"><categroy-box :categoryList="categoryList"></categroy-box><view class="list-container"><!-- 热门推荐 --><swiper-course name="热门推荐" word="Hot" :couseData="hotCourseList"></swiper-course><scroll-course name="近期上新" word="New" :courseData="newCourselist"></scroll-course><swiper-course name="免费精选" word="Free" :couseData="freeCourselist"></swiper-course><list-course name="付费精品" word="Nice" :courseData="payCourselist"></list-course></view></mescroll-body>

@init=“mescrollInit”
@down=“downCallback”
@up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致)
:down=“downOption” :up=“upOption” 绝大部分情况无需配置
:top=“顶部偏移量” :bottom=“底部偏移量” :topbar=“状态栏” :safearea=“安全区” (常用)
字节跳动小程序 ref=“mescrollRef” 必须配置
此处支持写入原生组件
2、引入js

// 引入mescroll-mixins.jsimport MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

具体的大致步骤，官网有详细讲解
官网的讲解
3、重新父类中upCallback（触底更新的方法）
(1)、第一次进入页面会触发upCallback触底方法，
(2)、上拉刷新也会触发upCallback（）方法，所以这里就不去改变父类的downCallback的方法，沿用父类的downCallback方法
(3)、因为第一次加载页面会调用upCallback方法，所以将页面加载的方法，由onload 转移到upCallback方法中，第一次刷新数据默认是（1,10）这个在data里面配置的，page.num=1，page.size=10，如果下拉触底会自动添加1，也就是递增改变page.num的值，当达到总条数或者超过时候，调用 this.mescroll.endBySize(curList.length, res.data.total)结束调用，
(4)、上拉的时候也会调用 upCallback方法，传入的参数为page.num=1，page.size=10

            // 下拉刷新// downCallback() {//     console.log("下拉刷新")//     // 绝大部分情况methods中都不用写downCallback的,此时会默认调MescrollMixin的downCallback (效果同第2种)// },//上拉触发async upCallback(page) {console.log("上拉触发")let pageNum = page.num; // 页码, 默认从1开始let pageSize = page.size; // 页长, 默认每页10条console.log("下拉触发pageNum", pageNum)console.log("下拉触发pageSize", pageSize)if (page.num === 1) {// 轮播图this.loadBannerData()// 列表数据大数据云计算这类this.loadCateData()// 查询热门列表数据this.loadHotCourseList()// 免费精选this.loadFreeCourseList()// 近期上新this.loadNewCourseList()// 收费课程// this.loadPayCourseList()}// 收费课程const res = await courseAPI.getList({isFree: 0}, page.num, page.size)const curList = res.data.recordsif (page.num === 1) {this.payCourselist = []}console.log("热点轮播", res)this.payCourselist = this.payCourselist.concat(curList)this.mescroll.endBySize(curList.length, res.data.total)},

data中配置的downOption和upOption参数如下，主要是上啦下拉的样式

downOption: {use: true, // 是否启用下拉刷新; 默认trueauto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认truenative: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认falseisLock: false, // 是否锁定下拉刷新,默认false;offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;bgColor: "#E75A7C", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)textColor: "#fff", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本textLoading: '蒋皓洁稍等加载中 ...' // 加载中的提示文本},
upOption: {use: true, // 是否启用上拉加载; 默认trueauto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认trueisLock: false, // 是否锁定上拉加载,默认false;isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;page: {num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 10, // 每页数据的数量time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;},noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)textLoading: '加载中 ...', // 加载中的提示文本textNoMore: '-- END --', // 没有更多数据的提示文本toTop: {// 回到顶部按钮,需配置src才显示src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)zIndex: 9990, // fixed定位z-index值left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)},empty: {use: true, // 是否显示空布局icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径tip: '~ 暂无相关数据 ~', // 提示btnText: '去逛逛 >', // 按钮fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")zIndex: 99 // fixed定位z-index值},onScroll: true // 是否监听滚动事件, 默认false, 仅mescroll-uni生效; mescroll-body直接声明onPageScroll (配置为true时,可@scroll="scroll"获取到滚动条位置和方向; 注意监听列表滚动是非常耗性能的,很容易出现卡顿,非特殊情况不要配置此项)},

最后样式如下

三、分类页面的配置

页面如下所示

1、pages.json中的配置

"style": {"navigationBarTitleText": "分类","navigationBarBackgroundColor": "#345DC2", //导航栏背景色"navigationBarTextStyle": "white" ,//导航栏标题颜色 "app-plus":{"bounce":"none","titleNView":{"buttons":[{"color":"#FFFFFF","fontSize":"23","fontSrc":"/static/icon/iconfont.ttf","text":"\ue608","float":"right "}]}}}

2、页面配置如下
(1)、页面通过mounted拿到全部的数据，左边的名称name，并遍历出左边样式
数据结构大致如下

code": 20000,"message": "查询成功","data": [{"id": 1,"name": "Java","labelList": [{"id": 10,"name": "wkhrlxndgu"},{"id": 11,"name": "abmexukxk"},{"id": 12,"name": "nthyo"},{"id": 13,"name": "ttuoziu"},{"id": 14,"name": "crqwsoz"},{"id": 15,"name": "nyinkgblpv"}]},{"id": 2,"name": "前端","labelList": [{"id": 16,"name": "qbxlbyekyj"},{"id": 17,"name": "bwmuipwr"},{"id": 18,"name": "jwuom"},{"id": 19,"name": "xzp"},{"id": 20,"name": "rytxtwgb"},{"id": 21,"name": "mafecngxz"}]},

(2)、通过:class="{active:index==activeIndex}"动态的绑定框框的选中样式

(3)、通过@click.stop="getLable(index,item)"来绑定点击时候把序号绑定到activeIndex，从而绑定样式
(4)、@click.stop="getLable(index,item)"来动态的将值赋给右边的组件并遍历
(5)、

<template><view class="category"><scroll-view scroll-y="true" class="left noScorll"><view class="title"><!--@click.stop阻止冒泡点击，不会影响父元素点击  --><view v-for="(item, index) in categoryList" :class="{active:index==activeIndex}" :key="index" @click.stop="getLable(index,item)">{{item.name}}</view></view></scroll-view><scroll-view scroll-y="true" class="right"><view class="tag"><view v-for="(item,index) in labelList" :key="index" @click="clicklabel(item)">{{item.name}}</view></view></scroll-view></view>
</template><script>import api from '@/api/course.js'export default {data() {return {categoryList: [], //左侧分类数据labelList: [], //右侧分类数据activeIndex: 0 //当前选中的下标}},mounted() {this.getList()},methods: {async getList() {const res = await api.getCategoryList()this.categoryList = res.dataconsole.log("查询分类的标签", res.data)// 获取当前的标签列表this.getLable(this.activeIndex)},// 获取标签信息// index分类的下标，item当前分类的信息getLable(index, item) {console.log(index)// 选中的样式this.activeIndex = index;//点击获取分类对象// 通过获取了分类对象，来获取标签列表const activeCategory = this.categoryList[index];// 通过分类对象获取标签列表this.labelList = activeCategory.labelListconsole.log(activeCategory.labelList)},// 点击标签跳转到搜索页面clicklabel(item) {console.log(item)}}}
</script><style lang="scss">page {height: 100%;}.category {display: flex;// flex-direction: row;height: 100%;.left {background-color: #F8F9FB;width: 260rpx;border-radius: 0 25rpx 25rpx 0;.title {view {// color: #005CC5;// width: 100%;// padding: 50rpx 20rpx;// text-align: center;// font-size: 30rpx;// position: relative;text-align: center;font-size: 30rpx;color: #888888;width: 100%;padding: 55rpx 30rpx;position: relative;&:before {position: absolute;content: '';width: 0;height: 0;border-right: 6rpx solid $mxg-color-primary;border-radius: 30rpx;left: 0;top: 50%;transform: translateY(-50%);transition: 0.3s;}}.active {color: $mxg-color-primary;font-size: 33rpx;font-weight: bold;&:before {height: 50rpx;}}}}.right {background-color: #FFFFFF;padding-left: 20rpx;margin: 0; //全屏铺满的效果.tag {display: flex; //指定flex布局flex-wrap: wrap; //自动换行padding-top: 35rpx;padding-left: 10rpx;view {font-size: 25rpx;line-height: 60rpx;border: 1px solid #999;border-radius: 30rpx;min-width: 160rpx;text-align: center;padding: 0 5rpx;margin: 15rpx 5rpx;}}}}
</style>