You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

360 lines
14 KiB

3 years ago
  1. <template>
  2. <view
  3. class="mescroll-body mescroll-render-touch"
  4. :style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom}"
  5. :class="{'mescorll-sticky': sticky}"
  6. @touchstart="wxsBiz.touchstartEvent"
  7. @touchmove="wxsBiz.touchmoveEvent"
  8. @touchend="wxsBiz.touchendEvent"
  9. @touchcancel="wxsBiz.touchendEvent"
  10. :change:prop="wxsBiz.propObserver"
  11. :prop="wxsProp"
  12. >
  13. <!-- 状态栏 -->
  14. <view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
  15. <view class="mescroll-body-content mescroll-wxs-content" :style="{ transform: translateY, transition: transition }" :change:prop="wxsBiz.callObserver" :prop="callProp">
  16. <!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
  17. <!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType"></mescroll-down> -->
  18. <view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
  19. <view class="downwarp-content">
  20. <image class="downwarp-slogan" src="https://www.mescroll.com/img/beibei/mescroll-slogan.jpg?v=1" mode="widthFix"/>
  21. <view v-if="isDownLoading" class="downwarp-loading mescroll-rotate"></view>
  22. <view v-else class="downwarp-progress" :style="{'transform':downRotate}"></view>
  23. <view class="downwarp-mascot"></view>
  24. </view>
  25. </view>
  26. <!-- 列表内容 -->
  27. <slot></slot>
  28. <!-- 空布局 -->
  29. <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
  30. <!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
  31. <!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
  32. <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
  33. <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
  34. <view v-show="upLoadType===1">
  35. <view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
  36. <view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
  37. </view>
  38. <!-- 无数据 -->
  39. <view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
  40. </view>
  41. </view>
  42. <!-- 底部是否偏移TabBar的高度(仅H5端生效) -->
  43. <!-- #ifdef H5 -->
  44. <view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
  45. <!-- #endif -->
  46. <!-- 适配iPhoneX -->
  47. <view v-if="safearea" class="mescroll-safearea"></view>
  48. <!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
  49. <mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
  50. <!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
  51. <!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
  52. <view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
  53. <!-- #endif -->
  54. </view>
  55. </template>
  56. <!-- 微信小程序, QQ小程序, app, h5使用wxs -->
  57. <!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
  58. <script src="../../mescroll-uni/wxs/wxs.wxs" module="wxsBiz" lang="wxs"></script>
  59. <!-- #endif -->
  60. <!-- app, h5使用renderjs -->
  61. <!-- #ifdef APP-PLUS || H5 -->
  62. <script module="renderBiz" lang="renderjs">
  63. import renderBiz from '../../mescroll-uni/wxs/renderjs.js';
  64. export default {
  65. mixins: [renderBiz]
  66. }
  67. </script>
  68. <!-- #endif -->
  69. <script>
  70. import MeScroll from '../../mescroll-uni/mescroll-uni.js';
  71. import MescrollTop from '../../mescroll-uni/components/mescroll-top.vue';
  72. import WxsMixin from '../../mescroll-uni/wxs/mixins.js';
  73. import mescrollI18n from '../../mescroll-uni/mescroll-i18n.js';
  74. import GlobalOption from './mescroll-uni-option.js';
  75. export default {
  76. mixins: [WxsMixin],
  77. components: {
  78. MescrollTop
  79. },
  80. data() {
  81. return {
  82. mescroll: null, // mescroll实例
  83. downHight: 0, //下拉刷新: 容器高度
  84. downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
  85. upLoadType: 0, // 上拉加载状态:0(loading前),1(loading中),2(没有更多了,显示END文本提示),3(没有更多了,不显示END文本提示)
  86. isShowEmpty: false, // 是否显示空布局
  87. isShowToTop: false, // 是否显示回到顶部按钮
  88. windowHeight: 0, // 可使用窗口的高度
  89. windowBottom: 0, // 可使用窗口的底部位置
  90. statusBarHeight: 0 // 状态栏高度
  91. };
  92. },
  93. props: {
  94. down: Object, // 下拉刷新的参数配置
  95. up: Object, // 上拉加载的参数配置
  96. i18n: Object, // 国际化的参数配置
  97. top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
  98. topbar: [Boolean, String], // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
  99. bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
  100. safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
  101. height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
  102. bottombar:{ // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
  103. type: Boolean,
  104. default: true
  105. },
  106. sticky: Boolean // 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法会隐藏
  107. },
  108. computed: {
  109. // mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
  110. minHeight(){
  111. return this.toPx(this.height || '100%') + 'px'
  112. },
  113. // 下拉布局往下偏移的距离 (px)
  114. numTop() {
  115. return this.toPx(this.top)
  116. },
  117. padTop() {
  118. return this.numTop + 'px';
  119. },
  120. // 上拉布局往上偏移 (px)
  121. numBottom() {
  122. return this.toPx(this.bottom);
  123. },
  124. padBottom() {
  125. return this.numBottom + 'px';
  126. },
  127. // 是否为重置下拉的状态
  128. isDownReset() {
  129. return this.downLoadType === 3 || this.downLoadType === 4;
  130. },
  131. // 过渡
  132. transition() {
  133. return this.isDownReset ? 'transform 300ms' : '';
  134. },
  135. translateY() {
  136. return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
  137. },
  138. // 是否在加载中
  139. isDownLoading(){
  140. return this.downLoadType === 3
  141. },
  142. // 旋转的角度
  143. downRotate(){
  144. return this.downLoadType === 2 ? 'rotate(180deg)' : 'rotate(0deg)'
  145. }
  146. },
  147. methods: {
  148. //number,rpx,upx,px,% --> px的数值
  149. toPx(num) {
  150. if (typeof num === 'string') {
  151. if (num.indexOf('px') !== -1) {
  152. if (num.indexOf('rpx') !== -1) {
  153. // "10rpx"
  154. num = num.replace('rpx', '');
  155. } else if (num.indexOf('upx') !== -1) {
  156. // "10upx"
  157. num = num.replace('upx', '');
  158. } else {
  159. // "10px"
  160. return Number(num.replace('px', ''));
  161. }
  162. } else if (num.indexOf('%') !== -1) {
  163. // 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
  164. let rate = Number(num.replace('%', '')) / 100;
  165. return this.windowHeight * rate;
  166. }
  167. }
  168. return num ? uni.upx2px(Number(num)) : 0;
  169. },
  170. // 点击空布局的按钮回调
  171. emptyClick() {
  172. this.$emit('emptyclick', this.mescroll);
  173. },
  174. // 点击回到顶部的按钮回调
  175. toTopClick() {
  176. this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
  177. this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
  178. }
  179. },
  180. // 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
  181. created() {
  182. let vm = this;
  183. let diyOption = {
  184. // 下拉刷新的配置
  185. down: {
  186. inOffset() {
  187. vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
  188. },
  189. outOffset() {
  190. vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
  191. },
  192. onMoving(mescroll, rate, downHight) {
  193. // 下拉过程中的回调,滑动过程一直在执行;
  194. vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
  195. },
  196. showLoading(mescroll, downHight) {
  197. vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
  198. vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
  199. },
  200. endDownScroll() {
  201. vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
  202. vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
  203. if(vm.downResetTimer) {clearTimeout(vm.downResetTimer); vm.downResetTimer = null} // 移除重置倒计时
  204. vm.downResetTimer = setTimeout(()=>{ // 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
  205. if(vm.downLoadType === 4) vm.downLoadType = 0
  206. },300)
  207. },
  208. // 派发下拉刷新的回调
  209. callback: function(mescroll) {
  210. vm.$emit('down', mescroll);
  211. }
  212. },
  213. // 上拉加载的配置
  214. up: {
  215. // 显示加载中的回调
  216. showLoading() {
  217. vm.upLoadType = 1;
  218. },
  219. // 显示无更多数据的回调
  220. showNoMore() {
  221. vm.upLoadType = 2;
  222. },
  223. // 隐藏上拉加载的回调
  224. hideUpScroll(mescroll) {
  225. vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
  226. },
  227. // 空布局
  228. empty: {
  229. onShow(isShow) {
  230. // 显示隐藏的回调
  231. vm.isShowEmpty = isShow;
  232. }
  233. },
  234. // 回到顶部
  235. toTop: {
  236. onShow(isShow) {
  237. // 显示隐藏的回调
  238. vm.isShowToTop = isShow;
  239. }
  240. },
  241. // 派发上拉加载的回调
  242. callback: function(mescroll) {
  243. vm.$emit('up', mescroll);
  244. }
  245. }
  246. };
  247. let i18nType = mescrollI18n.getType() // 当前语言类型
  248. let i18nOption = {type: i18nType} // 国际化配置
  249. MeScroll.extend(i18nOption, vm.i18n) // 具体页面的国际化配置
  250. MeScroll.extend(i18nOption, GlobalOption.i18n) // 全局的国际化配置
  251. MeScroll.extend(diyOption, i18nOption[i18nType]); // 混入国际化配置
  252. MeScroll.extend(diyOption, {down:GlobalOption.down, up:GlobalOption.up}); // 混入全局的配置
  253. let myOption = JSON.parse(JSON.stringify({down: vm.down,up: vm.up})); // 深拷贝,避免对props的影响
  254. MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
  255. // 初始化MeScroll对象
  256. vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
  257. // 挂载语言包
  258. vm.mescroll.i18n = i18nOption;
  259. // init回调mescroll对象
  260. vm.$emit('init', vm.mescroll);
  261. // 设置高度
  262. const sys = uni.getSystemInfoSync();
  263. if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
  264. if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
  265. if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
  266. // 使down的bottomOffset生效
  267. vm.mescroll.setBodyHeight(sys.windowHeight);
  268. // 因为使用的是page的scroll,这里需自定义scrollTo
  269. vm.mescroll.resetScrollTo((y, t) => {
  270. if(typeof y === 'string'){
  271. // 滚动到指定view (y为css选择器)
  272. setTimeout(()=>{ // 延时确保view已渲染; 不使用$nextTick
  273. let selector;
  274. if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
  275. selector = '#'+y // 不带#和. 则默认为id选择器
  276. }else{
  277. selector = y
  278. // #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
  279. if(y.indexOf('>>>')!=-1){ // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
  280. selector = y.split('>>>')[1].trim()
  281. }
  282. // #endif
  283. }
  284. uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
  285. if (rect) {
  286. let top = rect.top
  287. top += vm.mescroll.getScrollTop()
  288. uni.pageScrollTo({
  289. scrollTop: top,
  290. duration: t
  291. })
  292. } else{
  293. console.error(selector + ' does not exist');
  294. }
  295. }).exec()
  296. },30)
  297. } else{
  298. // 滚动到指定位置 (y必须为数字)
  299. uni.pageScrollTo({
  300. scrollTop: y,
  301. duration: t
  302. })
  303. }
  304. });
  305. // 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
  306. if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
  307. vm.mescroll.optUp.toTop.safearea = vm.safearea;
  308. }
  309. // 全局配置监听
  310. uni.$on("setMescrollGlobalOption", options=>{
  311. if(!options) return;
  312. let i18nType = options.i18n ? options.i18n.type : null
  313. if(i18nType && vm.mescroll.i18n.type != i18nType){
  314. vm.mescroll.i18n.type = i18nType
  315. mescrollI18n.setType(i18nType)
  316. MeScroll.extend(options, vm.mescroll.i18n[i18nType])
  317. }
  318. if(options.down){
  319. let down = MeScroll.extend({}, options.down)
  320. vm.mescroll.optDown = MeScroll.extend(down, vm.mescroll.optDown)
  321. }
  322. if(options.up){
  323. let up = MeScroll.extend({}, options.up)
  324. vm.mescroll.optUp = MeScroll.extend(up, vm.mescroll.optUp)
  325. }
  326. })
  327. },
  328. destroyed() {
  329. // 注销全局配置监听
  330. uni.$off("setMescrollGlobalOption")
  331. }
  332. };
  333. </script>
  334. <style>
  335. @import "../../mescroll-body/mescroll-body.css";
  336. @import "../../mescroll-uni/components/mescroll-down.css";
  337. @import "../../mescroll-uni/components/mescroll-up.css";
  338. @import "./components/mescroll-down.css";
  339. </style>