Commit 05c13745 authored by jyx's avatar jyx

更新z-paging,代码优化

parent 17957b0b
<template>
<view style="background: white;">
<scroll-view scroll-y="true"
:style="'height: '+(windowHeight -120)+'px;margin-top:'+(titleBarHeight +statusBarHeight)+'px;'">
<view class="flex space" style="display:flex; flex-wrap:wrap;">
<block v-for="(value,key) in dataList" :key="key">
<view class="mt-10"
style="width:31%; position: relative; border-radius:20rpx;margin-bottom: 10rpx;margin-left: 14rpx;"
@click.stop="click(value)" @longpress.stop="longClick(key)">
<image class="integral-mall-goods" mode="aspectFill" :src="value.coverImage"></image>
<view class="text" style="font-size: 26rpx;color: black;height: 36rpx;margin-left: 5rpx;">
{{value.title}}
</view>
<view class="text" style="font-size: 22rpx;color: gray;height: 30rpx;margin-left: 5rpx;">
{{value.vedioDesc}}
</view>
<view v-if="isEditStyle" @click.stop="cbClick(key)" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 96%;top: 0;border-radius:20rpx;
padding-left: 20rpx;padding-top: 20rpx;">
<image v-if="value.isChecked" src="@/static/ic_selected.png"
style="width: 50rpx;height: 50rpx;" />
<image v-if="!value.isChecked" src="@/static/ic_unselected.png"
style="width: 50rpx;height: 50rpx;" />
</view>
</view>
</block>
</view>
</scroll-view>
<view v-if="dataList.length<=0"
style="position: absolute;left: 50%;width: 240rpx;margin-left: -120rpx;top: 600rpx;text-align: center;">
<text style="color: gray;">暂无在追剧</text>
<view @click="goRecommend" class="button" style="margin-top: 20rpx;color: white;">去剧场</view>
</view>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "follow",
mixins: [common],
data() {
return {
titleBarHeight: app.globalData.titleBarHeight,
statusBarHeight: app.globalData.statusBarHeight,
windowHeight: 0,
dataList: [],
isEditStyle: false
}
},
watch: {
isEditStyle: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
},
},
onLoad(e) {},
methods: {
show() {
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.loadData()
},
loadData() {
// 收藏记录
this.post({
url: '/vedio/collectList',
showLoading: false,
success: ({
data
}) => {
this.dataList = data.list;
if (this.dataList.length > 0) {
this.$emit("showEditR", true)
} else {
this.$emit("showEditR", false)
}
}
});
},
changeEditStyle(b) {
this.isEditStyle = b
if (!this.isEditStyle) {
this.noChoice()
}
},
goRecommend() {
this.$emit("goRecommend")
},
click(detail) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)))
},
longClick(key) {
this.isEditStyle = true
this.dataList[key].isChecked = true
},
onChange(key) {
this.dataList[key].isChecked = !this.dataList[key].isChecked
},
cbClick(key) {
let newData = this.dataList[key]
newData.isChecked = !newData.isChecked
this.$set(this.dataList, key, newData)
},
fullChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = true
}
this.$forceUpdate()
},
noChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = false
}
this.$forceUpdate()
},
deleteCollect() {
let list = []
for (let i = 0; i < this.dataList.length; i++) {
if (this.dataList[i].isChecked) {
list.push(this.dataList[i].vedioId)
}
}
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
list
},
showLoading: false,
success: ({
data
}) => {
this.isEditStyle = false
uni.showToast({
title: "删除成功"
})
this.loadData()
}
});
},
}
}
</script>
<style lang="scss" scoped>
.integral-mall-goods {
width: 100%;
height: 320rpx;
background: #F2F2F2;
border-radius: 16upx;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cb {
margin-top: 10rpx;
margin-left: 10rpx;
// position: absolute;
}
</style>
\ No newline at end of file
This diff is collapsed.
<template>
<view class="body">
<!-- <scroll-view :scroll-y="true"> -->
<z-paging style="height: 100%;">
<view
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
<image class="avatar" src="@/static/logo-about.png"></image>
<view>
<view style="font-size: 32rpx;color: black;margin-left: 20rpx;">用户ID:{{userBean.idcode}}</view>
</view>
<!-- <button text="微信用户一键登录" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">123123</button> -->
</view>
<view v-if="userBean.showVipInner && os === 'android' "
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 36rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
</view>
<view v-else style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
</view>
<view v-if="userBean.expireTime<=0" @click="handleCoinPay"
style="width: 210rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;margin-top: 30rpx;">
立即开通
</view>
<view v-else style="width: 210rpx;height: 60rpx;padding-bottom: 4rpx;margin-top: 30rpx;">
</view>
</view>
<image style="border-radius:10rpx; width: 130rpx;height: 100rpx;margin-right: 20rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png" mode="scaleToFill"></image>
</view>
<view v-if="os === 'android' "
style="display: flex;height: 200rpx;margin: 20rpx;background: #f5ca86;border-radius: 20rpx;">
<view style="flex-grow: 2; margin-left: 20rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
<view style="display: flex;align-items: center;">
<image
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_my_coin.png"></image>
<view style="font-size: 36rpx;font-weight: 777;">看点充值</view>
</view>
<view style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">海量看点狂洒中,好剧等你来解锁</view>
</view>
</view>
<view style="width: 220rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view style="font-size: 30rpx;color: #5b1500;margin-bottom: 20rpx;">{{userBean.point}}</view>
<view @click="handleCoinPay"
style="width: 160rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;">
去充值
</view>
</view>
</view>
</view>
<view class="infobg" style="margin: 20rpx;">
<view v-if="userBean.showVipInner && os === 'android' " class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-if="os === 'android' " class="item arrow" @click="handleDotRecord">
看点记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-if="os === 'android' " class="item arrow" @click="handleUseDotRecord">
消费记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleWatchRecord">
观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handlePhone">
联系客服
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
</view>
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }}
</view>
</z-paging>
<!-- </scroll-view> -->
<coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
</coin-popup>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
getToLocal
} from "@/utils/utils.js"
import {
navigateTo,
message,
alert,
loading
} from '@/utils/fun.js';
import {
openUrl
} from '@/utils/app+.js';
const app = getApp();
export default {
name: 'index',
mixins: [common],
data() {
return {
statusBarHeight: app.globalData.statusBarHeight,
userBean: {},
showAnimate: false,
windowHeight: 0,
os: 'android',
versionName: app.globalData.versionName,
corpid: '', // 企业ID
curl: '', // 客服链接
};
},
methods: {
show() {
this.os = wx.getSystemInfoSync().platform;
this.windowHeight = uni.getSystemInfoSync().windowHeight
// loadData() {
this.post({
url: '/user/baseMsg',
showLoading: false,
success: ({
data
}) => {
this.userBean = data;
}
});
},
hide() {
},
handleDotRecord() {
// 看点记录
navigateTo(`/pagesD/dotRecord/dotRecord`)
},
handleUseDotRecord() {
// 看点消费记录
navigateTo(`/pagesD/useDotRecord/useDotRecord`)
},
handleWatchRecord() {
navigateTo(`/pagesD/watchRecord/watchRecord`)
},
handleCoinPay() {
this.showAnimate = true;
},
handlePayRecord() {
navigateTo(`/pagesD/payRecord/payRecord`)
},
handleVipPay() {
navigateTo(`/pagesA/vipPay/vipPay`)
},
handlePhone() {
// if (this.corpid != '' && this.curl != '') {
// wx.openCustomerServiceChat({
// extInfo: {
// url: this.curl
// },
// corpId: this.corpid,
// success(res) {},
// fail(e) {
// console.log(e)
// }
// })
// } else {
// let that = this
// // 联系我们
// this.post({
// url: '/vedio/customerServiceNumbers',
// showLoading: false,
// success: ({
// data
// }) => {
// let datas = data.customerServiceNumbers.split(',')
// that.corpid = datas[0]
// that.curl = datas[1]
// wx.openCustomerServiceChat({
// extInfo: {
// url: that.curl
// },
// corpId: that.corpid,
// success(res) {},
// fail(e) {
// console.log(e)
// }
// })
// }
// });
// }
wx.makePhoneCall({
phoneNumber: '4000969950',
success: function(res) {
console.log('拨打电话成功!');
},
fail: function(res) {
console.log('拨打电话失败!');
}
})
},
paySuccess(largeType) {
// largeType=vip 开通vip
// largeType=point 购买看点
message.notify('支付成功');
this.post({
url: '/user/baseMsg',
showLoading: false,
success: ({
data
}) => {
this.userBean = data;
}
});
},
getPhoneNumber(e) {
console.log(e.detail.code) // 动态令牌
console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
console.log(e.detail.errno) // 错误码(失败时返回)
}
}
};
</script>
<style lang="scss">
@import '@/scss/uni.scss';
.body {
background-color: whitesmoke;
}
.avatar {
background-color: #d8d8d8;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
\ No newline at end of file
<template>
<view class="body">
<view class="tabContainer" :style="
'height:' +
titleBarHeight +
'px;line-height:' +
titleBarHeight +
'px;padding-top:' +
statusBarHeight +
'px;background-color:transparent'
">
<view v-if="(current==0 && showEdit)"
:style="'position: absolute;left: 20rpx;top:'+ (statusBarHeight + 10) + 'px'"
@click.stop="showEditBar = !showEditBar">
<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
:src="showEditBar?'/static/video/close.png':'/static/video/edit.png'" />
</view>
<view v-show="showEditBar" style="width: 300rpx;background: white;z-index: 999;">
<view
style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">
追剧
</view>
</view>
<view v-if="(!showEditBar && showTap)">
<u-tabs :list="tabs" :current="current" @change="handleChange" lineWidth="30" :scrollable="false"
:lineColor="current==0?'#f56c6c':'#ffffff'" :activeStyle="{
color: current==0?'#000000':'#ffffff',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" />
</view>
</view>
<swiper class="swiper" @change="swiperChange" :current="current" :disable-touch="showEditBar">
<swiper-item class="swiper-item">
<followPage v-on:showEditBarR="showEditBarR" v-on:goRecommend="goRecommend" v-on:showEditR="showEditR"
ref="follow" />
</swiper-item>
<swiper-item class="swiper-item">
<recommendVideoPage ref="recommendVideo" />
</swiper-item>
</swiper>
</view>
</template>
<script>
import common from '@/mixins/common';
import followPage from "@/components/home/follow.vue";
import recommendVideoPage from "@/components/home/recommendVideo.vue";
// import followPage from "@/pages/recommend/follow.vue"
// import recommendVideoPage from "@/pages/recommend/recommendVideo.vue";
import {
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "recommend",
mixins: [common],
components: {
followPage,
recommendVideoPage
},
data() {
return {
current: 1,
tabIndex: 1,
tabs: [{
name: '追剧'
}, {
name: '推荐'
}],
showEditBar: false,
showEdit: false,
showTap: false,
titleBarHeight: app.globalData.titleBarHeight,
titleButtonWidth: app.globalData.titleButtonWidth,
statusBarHeight: app.globalData.statusBarHeight,
}
},
onLoad(e) {},
watch: {
showEditBar: {
handler(newValue, oldValue) {
this.$refs.follow.changeEditStyle(newValue);
}
},
},
methods: {
hide() {
try {
this.$refs.recommendVideo.stop();
} catch {
}
},
show() {
this.$nextTick(() => {
// 延迟渲染,否则位置错乱
this.showTap = true
})
if (this.current == 0) {
this.$refs.follow.show();
this.$refs.recommendVideo.stop();
this.$emit("changeBottomBarColor", false);
} else if (this.current == 1) {
this.$refs.recommendVideo.show();
this.$emit("changeBottomBarColor", true);
}
},
handleChange(event) {
this.current = event.index;
this.show()
},
swiperChange(event) {
this.current = event.detail.current
this.show()
},
showEditBarR(b) {
this.showEditBar = b
this.$emit("showEditBarH", b);
},
showEditR(b) {
this.showEdit = b
},
fullChoice() {
this.$refs.follow.fullChoice()
},
noChoice() {
this.$refs.follow.noChoice()
},
deleteCollect() {
this.$refs.follow.deleteCollect()
},
goRecommend() {
this.current = 1
},
}
}
</script>
<style lang="scss" scoped>
.body {
background: white;
width: 100%;
height: 100%;
}
.tabContainer {
width: 100%;
position: absolute;
z-index: 100;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
}
.swiper {
height: 100%;
}
.recommendTitle {}
</style>
\ No newline at end of file
This diff is collapsed.
// [z-paging]常量
const version = '2.2.0';
const delayTime = 100;
const i18nUpdateKey = 'z-paging-i18n-update';
const errorUpdateKey = 'z-paging-error-emit';
const completeUpdateKey = 'z-paging-complete-emit';
export default {
version,
delayTime,
i18nUpdateKey,
errorUpdateKey,
completeUpdateKey
}
\ No newline at end of file
// z-paging国际化(支持中文、中文繁体和英文)
const i18nUpdateKey = 'z-paging-i18n-update';
const t = {
refresherDefaultText: {
'en': 'Pull down to refresh',
'zh-cn': '继续下拉刷新',
'zh-hant-cn': '繼續下拉重繪',
},
refresherPullingText: {
'en': 'Release to refresh',
'zh-cn': '松开立即刷新',
'zh-hant-cn': '鬆開立即重繪',
},
refresherRefreshingText: {
'en': 'Refreshing...',
'zh-cn': '正在刷新...',
'zh-hant-cn': '正在重繪...',
},
refresherCompleteText: {
'en': 'Refresh succeeded',
'zh-cn': '刷新成功',
'zh-hant-cn': '重繪成功',
},
loadingMoreDefaultText: {
'en': 'Click to load more',
'zh-cn': '点击加载更多',
'zh-hant-cn': '點擊加載更多',
},
loadingMoreLoadingText: {
'en': 'Loading...',
'zh-cn': '正在加载...',
'zh-hant-cn': '正在加載...',
},
loadingMoreNoMoreText: {
'en': 'No more data',
'zh-cn': '没有更多了',
'zh-hant-cn': '沒有更多了',
},
loadingMoreFailText: {
'en': 'Load failed,click to reload',
'zh-cn': '加载失败,点击重新加载',
'zh-hant-cn': '加載失敗,點擊重新加載',
},
emptyViewText: {
'en': 'No data',
'zh-cn': '没有数据哦~',
'zh-hant-cn': '沒有數據哦~',
},
emptyViewReloadText: {
'en': 'Reload',
'zh-cn': '重新加载',
'zh-hant-cn': '重新加載',
},
emptyViewErrorText: {
'en': 'Sorry,load failed',
'zh-cn': '很抱歉,加载失败',
'zh-hant-cn': '很抱歉,加載失敗',
},
refresherUpdateTimeText: {
'en': 'Last update: ',
'zh-cn': '最后更新:',
'zh-hant-cn': '最後更新:',
},
refresherUpdateTimeNoneText: {
'en': 'None',
'zh-cn': '无',
'zh-hant-cn': '無',
},
refresherUpdateTimeTodayText: {
'en': 'Today',
'zh-cn': '今天',
'zh-hant-cn': '今天',
},
refresherUpdateTimeYesterdayText: {
'en': 'Yesterday',
'zh-cn': '昨天',
'zh-hant-cn': '昨天',
}
}
// 获取当前语言,格式为:zh-cn、zh-hant-cn、en。followSystemLanguage:获取的结果是否是在不跟随系统语言下获取到的
function getLanguage(followSystemLanguage = true) {
return _getPrivateLanguage(false, followSystemLanguage);
}
// 获取当前语言,格式为:简体中文、繁體中文、English。followSystemLanguage:获取的结果是否是在不跟随系统语言下获取到的
function getLanguageName(followSystemLanguage = true) {
const language = getLanguage(followSystemLanguage);
const languageNameMap = {
'zh-cn': '简体中文',
'zh-hant-cn': '繁體中文',
'en': 'English'
};
return languageNameMap[language];
}
//设置当前语言,格式为:zh-cn、zh-hant-cn、en
function setLanguage(myLanguage) {
uni.setStorageSync(i18nUpdateKey, myLanguage);
uni.$emit(i18nUpdateKey, myLanguage);
}
// 插件内部使用,请勿直接调用
function _getPrivateLanguage(myLanguage, followSystemLanguage = true) {
let systemLanguage = '';
if (followSystemLanguage) {
systemLanguage = uni.getSystemInfoSync().language;
}
let language = myLanguage || uni.getStorageSync(i18nUpdateKey) || systemLanguage;
language = language.toLowerCase();
var reg = new RegExp('_', '');
language = language.replace(reg, '-');
if (language.indexOf('zh') !== -1) {
if (language === 'zh' || language === 'zh-cn' || language.indexOf('zh-hans') !== -1) {
return 'zh-cn';
}
return 'zh-hant-cn';
}
if (language.indexOf('en') !== -1) {
return 'en';
}
return 'zh-cn';
}
export default {
t,
getLanguage,
getLanguageName,
setLanguage,
_getPrivateLanguage,
}
This diff is collapsed.
This diff is collapsed.
......@@ -12,7 +12,7 @@
{
"path": "pages/loading",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black" //用于配置状态栏的字体颜色
}
......@@ -21,14 +21,14 @@
{
"path": "pages/home",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
......@@ -36,35 +36,35 @@
{
"path": "pages/my/my",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black" //用于配置状态栏的字体颜色
}
}, {
"path": "pages/brower/brower",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/recommend",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/follow",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/recommendVideo",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
......@@ -76,7 +76,7 @@
"pages": [{
"path": "vipPay/vipPay",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
......@@ -86,14 +86,14 @@
"pages": [{
"path": "video/videoDetail",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "video/newVideoDetail",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
......@@ -103,28 +103,28 @@
"pages": [{
"path": "watchRecord/watchRecord",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black" //用于配置状态栏的字体颜色
}
}, {
"path": "payRecord/payRecord",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "dotRecord/dotRecord",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "useDotRecord/useDotRecord",
"style": {
"navigationStyle": "custom",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
......@@ -148,7 +148,7 @@
},
"globalStyle": {
"backgroundColor": "#232325",
"navigationStyle": "custom",
"navigationStyle": "default",
"app-plus": {
"bounce": "none",
"scrollIndicator": "none"
......
......@@ -88,9 +88,13 @@
const app = getApp();
// 首页
import indexPage from "@/pages/index/index.vue";
import recommendPage from "@/pages/recommend/recommend.vue";
import userPage from "@/pages/my/my.vue";
// import indexPage from "@/pages/index/index.vue";
// import recommendPage from "@/pages/recommend/recommend.vue";
// import userPage from "@/pages/my/my.vue";
import indexPage from "@/components/home/index.vue";
import recommendPage from "@/components/home/recommend.vue";
import userPage from "@/components/home/my.vue";
export default {
name: 'home',
......
......@@ -245,7 +245,9 @@
}, 500)
},
down() {
try {
this.$refs.select.close();
} catch {}
},
sellxj() {
this.$refs.select.open('bottom');
......
## 2.6.3(2023-11-30)
1.`新增` `completeByError`方法,支持通过方法传入请求失败原因,`z-paging-error-emit`亦支持相关参数。
2.`修复` 短时间内疯狂下拉&收回列表可能出现的列表无法滚动的问题。
3.`修复` `concat`为false时,无数据显示问题(by wty)。
4.`修复` 使用页面滚动时`scrollIntoViewById``scrollIntoViewByNodeTop`滚动的位置不正确的问题。
5.`修复` `refreshToPage``reload`之前调用时page参数无效的问题。
6.`修复` 滑动切换选项卡+吸顶演示2在安卓中下拉时整个页面被下拉的问题。
7.`修复` 在安卓+APP中使用`swiper-demo`可能出现的`Error: Not Found:Page`报错。
8.`优化` `refreshToPage`+`本地分页`时不进行网络请求,依然进行本地分页。
9.`优化` `completeByNoMore`完全由nomore控制,当传入空数组时,不强制设置为没有更多数据。
<!-- z-paging -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
<!-- 反馈QQ群:790460711 -->
<!-- z-paging-cell,用于在nvue中使用cell包裹,vue中使用view包裹 -->
<template>
<!-- #ifdef APP-NVUE -->
<cell :style="[cellStyle]">
<slot />
</cell>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view :style="[cellStyle]">
<slot />
</view>
<!-- #endif -->
</template>
<script>
export default {
name: "z-paging-cell",
props: {
//cellStyle
cellStyle: {
type: Object,
default: function() {
return {}
}
}
}
}
</script>
......@@ -5,12 +5,12 @@
<!-- 空数据占位view,此组件支持easycom规范,可以在项目中直接引用 -->
<template>
<view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]">
<view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]" @click="emptyViewClick">
<view class="zp-main">
<image v-if="!emptyViewImg.length" class="zp-main-image" :style="[emptyViewImgStyle]" :src="emptyImg" />
<image v-else class="zp-main-image" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" />
<text class="zp-main-title" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text>
<text v-if="showEmptyViewReload" class="zp-main-error-btn" :style="[emptyViewReloadStyle]" @click="reloadClick">{{emptyViewReloadText}}</text>
<text v-if="showEmptyViewReload" class="zp-main-error-btn" :style="[emptyViewReloadStyle]" @click.stop="reloadClick">{{emptyViewReloadText}}</text>
</view>
</view>
</template>
......@@ -18,10 +18,10 @@
<script>
import zStatic from '../z-paging/js/z-paging-static'
export default {
name: "z-paging-empty-view",
data() {
return {
base64Empty: zStatic.base64Empty,
base64Error: zStatic.base64Error
};
},
props: {
......@@ -91,7 +91,7 @@
},
computed: {
emptyImg() {
return this.isLoadFailed ? this.base64Error : this.base64Empty;
return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty;
},
finalEmptyViewStyle(){
this.emptyViewStyle['z-index'] = this.emptyViewZIndex;
......@@ -101,6 +101,9 @@
methods: {
reloadClick() {
this.$emit('reload');
},
emptyViewClick() {
this.$emit('viewClick');
}
}
}
......@@ -146,6 +149,7 @@
color: #aaaaaa;
text-align: center;
margin-top: 10rpx;
padding: 0rpx 20rpx;
}
.zp-main-error-btn {
......
<!-- z-paging -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
<!-- 反馈QQ群:790460711 -->
<!-- 滑动切换选项卡swiper-item,此组件支持easycom规范,可以在项目中直接引用 -->
<template>
<view class="zp-swiper-item-container">
<z-paging ref="paging" :fixed="false"
:auto="false" :useVirtualList="useVirtualList" :useInnerList="useInnerList" :cellKeyName="cellKeyName" :innerListStyle="innerListStyle"
:preloadPage="preloadPage" :cellHeightMode="cellHeightMode" :virtualScrollFps="virtualScrollFps" :virtualListCol="virtualListCol"
@query="_queryList" @listChange="_updateList" style="height: 100%;">
<slot />
<template #header>
<slot name="header"/>
</template>
<template #cell="{item,index}">
<slot name="cell" :item="item" :index="index"/>
</template>
<template #footer>
<slot name="footer"/>
</template>
</z-paging>
</view>
</template>
<script>
import zPaging from '../z-paging/z-paging'
export default {
name: "z-paging-swiper-item",
components: { zPaging },
data() {
return {
firstLoaded: false
}
},
props: {
//当前组件的index,也就是当前组件是swiper中的第几个
tabIndex: {
type: Number,
default: function() {
return 0
}
},
//当前swiper切换到第几个index
currentIndex: {
type: Number,
default: function() {
return 0
}
},
//是否使用虚拟列表,默认为否
useVirtualList: {
type: Boolean,
default: false
},
//是否在z-paging内部循环渲染列表(内置列表),默认为否。若use-virtual-list为true,则此项恒为true
useInnerList: {
type: Boolean,
default: false
},
//内置列表cell的key名称,仅nvue有效,在nvue中开启use-inner-list时必须填此项
cellKeyName: {
type: String,
default: ''
},
//innerList样式
innerListStyle: {
type: Object,
default: function() {
return {};
}
},
//预加载的列表可视范围(列表高度)页数,默认为12,即预加载当前页及上下各12页的cell。此数值越大,则虚拟列表中加载的dom越多,内存消耗越大(会维持在一个稳定值),但增加预加载页面数量可缓解快速滚动短暂白屏问题
preloadPage: {
type: [Number, String],
default: 12
},
//虚拟列表cell高度模式,默认为fixed,也就是每个cell高度完全相同,将以第一个cell高度为准进行计算。可选值【dynamic】,即代表高度是动态非固定的,【dynamic】性能低于【fixed】。
cellHeightMode: {
type: String,
default: 'fixed'
},
//虚拟列表列数,默认为1。常用于每行有多列的情况,例如每行有2列数据,需要将此值设置为2
virtualListCol: {
type: [Number, String],
default: 1
},
//虚拟列表scroll取样帧率,默认为60,过高可能出现卡顿等问题
virtualScrollFps: {
type: [Number, String],
default: 60
},
},
watch: {
currentIndex: {
handler(newVal, oldVal) {
if (newVal === this.tabIndex) {
//懒加载,当滑动到当前的item时,才去加载
if (!this.firstLoaded) {
this.$nextTick(()=>{
let delay = 5;
// #ifdef MP-TOUTIAO
delay = 100;
// #endif
setTimeout(() => {
this.$refs.paging.reload().catch(() => {});
}, delay);
})
}
}
},
immediate: true
}
},
methods: {
reload(data) {
return this.$refs.paging.reload(data);
},
complete(data) {
this.firstLoaded = true;
return this.$refs.paging.complete(data);
},
_queryList(pageNo, pageSize, from) {
this.$emit('query', pageNo, pageSize, from);
},
_updateList(list) {
this.$emit('updateList', list);
}
}
}
</script>
<style scoped>
.zp-swiper-item-container {
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
}
</style>
<!-- z-paging -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
<!-- 反馈QQ群:790460711 -->
<!-- 滑动切换选项卡swiper容器,此组件支持easycom规范,可以在项目中直接引用 -->
<template>
<view :class="fixed?'zp-swiper-container zp-swiper-container-fixed':'zp-swiper-container'" :style="[finalSwiperStyle]">
<!-- #ifndef APP-PLUS -->
<view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
<!-- #endif -->
<slot v-if="zSlots.top" name="top" />
<view class="zp-swiper-super">
<view v-if="zSlots.left" :class="{'zp-swiper-left':true,'zp-absoulte':isOldWebView}">
<slot name="left" />
</view>
<view :class="{'zp-swiper':true,'zp-absoulte':isOldWebView}" :style="[swiperContentStyle]">
<slot />
</view>
<view v-if="zSlots.right" :class="{'zp-swiper-right':true,'zp-absoulte zp-right':isOldWebView}">
<slot name="right" />
</view>
</view>
<slot v-if="zSlots.bottom" name="bottom" />
</view>
</template>
<script>
import commonLayoutModule from '../z-paging/js/modules/common-layout'
export default {
name: "z-paging-swiper",
mixins: [commonLayoutModule],
data() {
return {
swiperContentStyle: {}
};
},
props: {
//是否使用fixed布局,默认为是
fixed: {
type: Boolean,
default: true
},
//是否开启底部安全区域适配
safeAreaInsetBottom: {
type: Boolean,
default: false
},
//z-paging-swiper样式
swiperStyle: {
type: Object,
default: function() {
return {};
},
}
},
mounted() {
this.$nextTick(() => {
this.systemInfo = uni.getSystemInfoSync();
})
// #ifndef APP-PLUS
this._getCssSafeAreaInsetBottom();
// #endif
this.updateLeftAndRightWidth();
this.swiperContentStyle = { 'flex': '1' };
// #ifndef APP-NVUE
this.swiperContentStyle = { width: '100%',height: '100%' };
// #endif
},
computed: {
finalSwiperStyle() {
const swiperStyle = this.swiperStyle;
if (!this.systemInfo) return swiperStyle;
const windowTop = this.windowTop;
const windowBottom = this.systemInfo.windowBottom;
if (this.fixed) {
if (windowTop && !swiperStyle.top) {
swiperStyle.top = windowTop + 'px';
}
if (!swiperStyle.bottom) {
let bottom = windowBottom || 0;
bottom += this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
if (bottom > 0) {
swiperStyle.bottom = bottom + 'px';
}
}
}
return swiperStyle;
}
},
methods: {
//更新slot="left"和slot="right"宽度,当slot="left"或slot="right"宽度动态改变时调用
updateLeftAndRightWidth() {
if (!this.isOldWebView) return;
this.$nextTick(() => this._updateLeftAndRightWidth(this.swiperContentStyle, 'zp-swiper'));
}
}
}
</script>
<style scoped>
.zp-swiper-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
}
.zp-swiper-container-fixed {
position: fixed;
/* #ifndef APP-NVUE */
height: auto;
width: auto;
/* #endif */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.zp-safe-area-inset-bottom {
position: absolute;
/* #ifndef APP-PLUS */
height: env(safe-area-inset-bottom);
/* #endif */
}
.zp-swiper-super {
flex: 1;
overflow: hidden;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.zp-swiper-left,.zp-swiper-right{
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
}
.zp-swiper {
flex: 1;
/* #ifndef APP-NVUE */
height: 100%;
width: 100%;
/* #endif */
}
.zp-absoulte {
/* #ifndef APP-NVUE */
position: absolute;
top: 0;
width: auto;
/* #endif */
}
.zp-right{
right: 0;
}
.zp-swiper-item {
height: 100%;
}
</style>
<!-- [z-paging]上拉加载更多view -->
<template>
<view class="zp-l-container" :style="[zConfig.customStyle]">
<text v-if="zConfig.showNoMoreLine&&finalStatus===2" :class="zConfig.defaultThemeStyle==='white'?'zp-l-line zp-l-line-white':'zp-l-line zp-l-line-black'"
:style="[zConfig.noMoreLineCustomStyle]" />
<view class="zp-l-container" :style="[c.customStyle]" @click="doClick">
<template v-if="!c.hideContent">
<text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" class="zp-l-line" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" />
<!-- #ifndef APP-NVUE -->
<image v-if="finalStatus===1&&zConfig.loadingIconCustomImage.length"
:src="zConfig.loadingIconCustomImage" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':zConfig.loadingAnimated}" />
<image v-if="finalStatus===1&&zConfig.loadingIconType==='flower'&&!zConfig.loadingIconCustomImage.length"
class="zp-line-loading-image" :style="[zConfig.iconCustomStyle]" :src="zConfig.defaultThemeStyle==='white'?base64FlowerWhite:base64Flower" />
<image v-if="finalStatus===M.Loading&&!!c.loadingIconCustomImage"
:src="c.loadingIconCustomImage" :style="[c.iconCustomStyle]" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':c.loadingAnimated}" />
<image v-if="finalStatus===M.Loading&&finalLoadingIconType==='flower'&&!c.loadingIconCustomImage.length"
class="zp-line-loading-image" :style="[c.iconCustomStyle]" :src="zTheme.flower[ts]" />
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view>
<loading-indicator v-if="finalStatus===1" class="zp-line-loading-image" :style="[{color:zConfig.defaultThemeStyle==='white'?'white':'#777777'}]" animating />
<loading-indicator v-if="finalStatus===M.Loading&&finalLoadingIconType!=='circle'" class="zp-line-loading-image" :style="[{color:zTheme.indicator[ts]}]" :animating="true" />
</view>
<!-- #endif -->
<text v-if="finalStatus===1&&zConfig.loadingIconType==='circle'&&!zConfig.loadingIconCustomImage.length"
:class="zConfig.defaultThemeStyle==='white'?'zp-l-line-loading-view zp-l-line-loading-view-white':'zp-l-line-loading-view zp-l-line-loading-view-black'" :style="[zConfig.iconCustomStyle]" />
<text :class="zConfig.defaultThemeStyle==='white'?'zp-l-text zp-l-text-white':'zp-l-text zp-l-text-black'" :style="[zConfig.titleCustomStyle]">{{ownLoadingMoreText}}</text>
<text v-if="zConfig.showNoMoreLine&&finalStatus===2" :class="zConfig.defaultThemeStyle==='white'?'zp-l-line zp-l-line-white':'zp-l-line zp-l-line-black'" :style="[zConfig.noMoreLineCustomStyle]" />
<text v-if="finalStatus===M.Loading&&finalLoadingIconType==='circle'&&!c.loadingIconCustomImage.length"
class="zp-l-circle-loading-view" :style="[{borderColor:zTheme.circleBorder[ts],borderTopColor:zTheme.circleBorderTop[ts]},c.iconCustomStyle]" />
<text class="zp-l-text" :style="[{color:zTheme.title[ts]},c.titleCustomStyle]">{{ownLoadingMoreText}}</text>
<text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" class="zp-l-line" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" />
</template>
</view>
</template>
<script>
import zStatic from '../js/z-paging-static'
import Enum from '../js/z-paging-enum'
export default {
name: 'z-paging-load-more',
data() {
return {
base64Arrow: zStatic.base64Arrow,
base64Flower: zStatic.base64Flower,
base64FlowerWhite: zStatic.base64FlowerWhite,
M: Enum.More,
zTheme: {
title: { white: '#efefef', black: '#a4a4a4' },
line: { white: '#efefef', black: '#eeeeee' },
circleBorder: { white: '#aaaaaa', black: '#c8c8c8' },
circleBorderTop: { white: '#ffffff', black: '#444444' },
flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
indicator: { white: '#eeeeee', black: '#777777' }
}
};
},
props: ['zConfig'],
computed: {
ownLoadingMoreText() {
return this.statusTextArr[this.finalStatus];
ts() {
return this.c.defaultThemeStyle;
},
statusTextArr() {
return [this.zConfig.defaultText,this.zConfig.loadingText,this.zConfig.noMoreText,this.zConfig.failText];
c() {
return this.zConfig || {};
},
ownLoadingMoreText() {
const statusTextArr = [this.c.defaultText,this.c.loadingText,this.c.noMoreText,this.c.failText];
return statusTextArr[this.finalStatus];
},
finalStatus() {
if (this.zConfig.defaultAsLoading && this.zConfig.status === 0) return 1;
return this.zConfig.status;
if (this.c.defaultAsLoading && this.c.status === this.M.Default) return this.M.Loading;
return this.c.status;
},
finalLoadingIconType() {
// #ifdef APP-NVUE
return 'flower';
// #endif
return this.c.loadingIconType;
}
},
methods: {
doClick() {
this.$emit('doClick');
}
}
}
......@@ -76,25 +98,19 @@
/* #endif */
}
.zp-l-line-loading-view {
.zp-l-circle-loading-view {
margin-right: 8rpx;
width: 22rpx;
width: 23rpx;
height: 23rpx;
border: 3rpx solid #dddddd;
border-radius: 50%;
/* #ifndef APP-NVUE */
animation: loading-circle 1s linear infinite;
/* #endif */
}
.zp-l-line-loading-view-black {
border-color: #c8c8c8;
border-top-color: #444444;
}
.zp-l-line-loading-view-white {
border-color: #aaaaaa;
border-top-color: #ffffff;
/* #ifdef APP-NVUE */
width: 30rpx;
height: 30rpx;
/* #endif */
}
.zp-l-text {
......@@ -104,28 +120,13 @@
/* #endif */
}
.zp-l-text-black {
color: #a4a4a4;
}
.zp-l-text-white {
color: #efefef;
}
.zp-l-line {
height: 1px;
width: 100rpx;
margin: 0rpx 10rpx;
}
.zp-l-line-black {
background-color: #eeeeee;
}
.zp-l-line-white {
background-color: #efefef;
}
/* #ifndef APP-NVUE */
@keyframes loading-circle {
0% {
-webkit-transform: rotate(0deg);
......@@ -136,4 +137,5 @@
transform: rotate(360deg);
}
}
/* #endif */
</style>
<!-- [z-paging]下拉刷新view -->
<template>
<view style="height: 100%;">
<view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'">
<view class="zp-r-left">
<image v-if="status!==2" :class="leftImageClass"
:style="[{width: showUpdateTime?'36rpx':'30rpx',height: showUpdateTime?'36rpx':'30rpx','margin-right': showUpdateTime?'20rpx':'9rpx'},imgStyle]"
:src="defaultThemeStyle==='white'?(status===3?base64SuccessWhite:base64ArrowWhite):(status===3?base64Success:base64Arrow)" />
<image v-if="status!==R.Loading" :class="leftImageClass" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
<!-- #ifndef APP-NVUE -->
<image v-else class="zp-line-loading-image zp-r-left-image"
:style="[{width: showUpdateTime?'36rpx':'30rpx',height: showUpdateTime?'36rpx':'30rpx','margin-right': showUpdateTime?'20rpx':'9rpx'},imgStyle]"
:src="defaultThemeStyle==='white'?base64FlowerWhite:base64Flower" />
<image v-else :class="{'zp-line-loading-image':refreshingAnimated,'zp-r-left-image':true}" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-else :style="[{'margin-right':showUpdateTime?'18rpx':'12rpx'}]">
<loading-indicator :class="systemInfo.platform==='ios'?'zp-loading-image-ios':'zp-loading-image-android'"
:style="[{color:defaultThemeStyle==='white'?'white':'#777777'},imgStyle]" animating />
<loading-indicator :class="isIos?'zp-loading-image-ios':'zp-loading-image-android'"
:style="[{color:zTheme.indicator[ts]},imgStyle]" :animating="true" />
</view>
<!-- #endif -->
</view>
<view class="zp-r-right">
<text class="zp-r-right-text"
:style="[rightTextStyle,titleStyle]">{{statusTextArr[status]||defaultText}}
<text class="zp-r-right-text" :style="[rightTextStyle,titleStyle]">{{currentTitle}}</text>
<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text zp-r-right-time-text" :style="[rightTextStyle,updateTimeStyle]">
{{refresherTimeText}}
</text>
<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text zp-r-right-time-text" :style="[rightTextStyle,updateTimeStyle]">{{refresherTimeText}}</text>
</view>
</view>
</view>
</template>
<script>
const systemInfo = uni.getSystemInfoSync();
import zStatic from '../js/z-paging-static'
import u from '../js/z-paging-utils'
import Enum from '../js/z-paging-enum'
export default {
name: 'z-paging-refresh',
data() {
return {
systemInfo: systemInfo,
base64Arrow: zStatic.base64Arrow,
base64ArrowWhite: zStatic.base64ArrowWhite,
base64Flower: zStatic.base64Flower,
base64FlowerWhite: zStatic.base64FlowerWhite,
base64Success: zStatic.base64Success,
base64SuccessWhite: zStatic.base64SuccessWhite,
R: Enum.Refresher,
isIos: uni.getSystemInfoSync().platform === 'ios',
refresherTimeText: '',
leftImageLoaded: false
zTheme: {
title: { white: '#efefef', black: '#555555' },
arrow: { white: zStatic.base64ArrowWhite, black: zStatic.base64Arrow },
flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
success: { white: zStatic.base64SuccessWhite, black: zStatic.base64Success },
indicator: { white: '#eeeeee', black: '#777777' }
}
};
},
props: {
'status': {
default: 0
},
'defaultThemeStyle': {},
'defaultText': {},
'pullingText': {},
'refreshingText': {},
'completeText': {},
'showUpdateTime': {
default: false
},
'updateTimeKey': {},
'imgStyle': {
default: {}
},
'titleStyle': {
default: {}
},
'updateTimeStyle': {
default: {}
},
},
props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'defaultImg', 'pullingImg',
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap'
],
computed: {
ts() {
return this.defaultThemeStyle;
},
statusTextArr() {
this.updateTime(this.updateTimeKey);
this.updateTime();
return [this.defaultText,this.pullingText,this.refreshingText,this.completeText];
},
currentTitle() {
return this.statusTextArr[this.status] || this.defaultText;
},
leftImageClass() {
if(this.status === 3){
return 'zp-r-left-image-no-transform .zp-r-left-image-pre-size';
}
let cls = 'zp-r-left-image ';
if (this.status === 0) {
if (this.leftImageLoaded) {
cls += 'zp-r-arrow-down';
} else {
this.leftImageLoaded = true;
cls += 'zp-r-arrow-down-no-duration';
}
} else {
cls += 'zp-r-arrow-top';
}
return cls + ' zp-r-left-image-pre-size';
if (this.status === this.R.Complete) return 'zp-r-left-image-pre-size';
return `zp-r-left-image zp-r-left-image-pre-size ${this.status === this.R.Default ? 'zp-r-arrow-down' : 'zp-r-arrow-top'}`;
},
leftImageStyle() {
const showUpdateTime = this.showUpdateTime;
const size = showUpdateTime ? '36rpx' : '30rpx';
return {width: size,height: size,'margin-right': showUpdateTime ? '20rpx' : '9rpx'};
},
leftImageSrc() {
const R = this.R;
const status = this.status;
if (status === R.Default) {
if (!!this.defaultImg) return this.defaultImg;
return this.zTheme.arrow[this.ts];
} else if (status === R.ReleaseToRefresh) {
if (!!this.pullingImg) return this.pullingImg;
if (!!this.defaultImg) return this.defaultImg;
return this.zTheme.arrow[this.ts];
} else if (status === R.Loading) {
if (!!this.refreshingImg) return this.refreshingImg;
return this.zTheme.flower[this.ts];;
} else if (status === R.Complete) {
if (!!this.completeImg) return this.completeImg;
return this.zTheme.success[this.ts];;
}
return '';
},
rightTextStyle() {
let stl = {};
let color = '#555555';
if (this.defaultThemeStyle === 'white') {
color = '#efefef';
}
// #ifdef APP-NVUE
if (this.showUpdateTime) {
stl = {
'height': '40rpx',
'line-height': '40rpx'
};
} else {
stl = {
'height': '80rpx',
'line-height': '80rpx'
};
}
const textHeight = this.showUpdateTime ? '40rpx' : '80rpx';
stl = {'height': textHeight, 'line-height': textHeight}
// #endif
stl['color'] = color;
stl['color'] = this.zTheme.title[this.ts];
return stl;
}
},
methods: {
updateTime(updateTimeKey) {
if (!updateTimeKey) {
updateTimeKey = this.updateTimeKey;
}
updateTime() {
if (this.showUpdateTime) {
this.refresherTimeText = u.getRefesrherFormatTimeByKey(updateTimeKey);
this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap);
}
}
}
......@@ -160,26 +138,9 @@
}
.zp-r-left-image {
/* #ifndef APP-NVUE */
transform: rotate(180deg);
margin-top: 2rpx;
/* #endif */
/* #ifdef APP-NVUE */
transition-duration: .2s;
transition-property: transform;
color: #666666;
/* #endif */
}
.zp-r-left-image-no-transform {
/* #ifndef APP-NVUE */
margin-top: 2rpx;
/* #endif */
/* #ifdef APP-NVUE */
transition-duration: .2s;
transition-property: transform;
color: #666666;
/* #endif */
}
.zp-r-left-image-pre-size{
......@@ -191,39 +152,11 @@
}
.zp-r-arrow-top {
/* #ifndef APP-NVUE */
animation: refresher-arrow-top .2s linear;
-webkit-animation: refresher-arrow-top .2s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(0deg);
/* #endif */
}
.zp-r-arrow-down {
/* #ifndef APP-NVUE */
animation: refresher-arrow-down .2s linear;
-webkit-animation: refresher-arrow-down .2s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(180deg);
/* #endif */
}
.zp-r-arrow-down-no-duration {
/* #ifndef APP-NVUE */
animation: refresher-arrow-down 0s linear;
-webkit-animation: refresher-arrow-down 0s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(180deg);
/* #endif */
}
.zp-r-right {
......@@ -246,26 +179,4 @@
margin-top: 10rpx;
font-size: 24rpx;
}
@keyframes refresher-arrow-top {
0% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes refresher-arrow-down {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
</style>
......@@ -6,6 +6,7 @@
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
/* #endif */
flex-direction: column;
}
......@@ -22,8 +23,7 @@
right: 0;
}
.zp-page-scroll-top,
.zp-page-scroll-bottom {
.zp-page-top,.zp-page-bottom {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
......@@ -33,18 +33,43 @@
z-index: 999;
}
.zp-page-left,.zp-page-right{
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
}
.zp-scroll-view-super {
flex: 1;
overflow: hidden;
position: relative;
}
.zp-custom-refresher-container {
overflow: hidden;
.zp-view-super{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.zp-scroll-view {
.zp-scroll-view-container,.zp-scroll-view {
position: relative;
/* #ifndef APP-NVUE */
height: 100%;
width: 100%;
/* #endif */
}
.zp-absoulte{
/* #ifndef APP-NVUE */
position: absolute;
top: 0;
width: auto;
/* #endif */
}
.zp-right{
right: 0;
}
.zp-scroll-view-absolute {
......@@ -117,12 +142,13 @@
}
.zp-custom-refresher-container {
overflow: hidden;
}
.zp-custom-refresher-refresh {
/* #ifndef APP-NVUE */
display: flex;
display: block;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
}
.zp-back-to-top {
......@@ -189,3 +215,11 @@
justify-content: center;
width: 750rpx;
}
.zp-n-list-container{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
}
......@@ -20,6 +20,7 @@
height: 32rpx;
}
/* #ifndef APP-NVUE */
@keyframes loading-flower {
0% {
-webkit-transform: rotate(0deg);
......@@ -30,3 +31,5 @@
transform: rotate(1turn);
}
}
/* #endif */
{
"zp.refresher.default": "Pull down to refresh",
"zp.refresher.pulling": "Release to refresh",
"zp.refresher.refreshing": "Refreshing...",
"zp.refresher.complete": "Refresh succeeded",
"zp.loadingMore.default": "Click to load more",
"zp.loadingMore.loading": "Loading...",
"zp.loadingMore.noMore": "No more data",
"zp.loadingMore.fail": "Load failed,click to reload",
"zp.emptyView.title": "No data",
"zp.emptyView.reload": "Reload",
"zp.emptyView.error": "Sorry,load failed",
"zp.refresherUpdateTime.title": "Last update: ",
"zp.refresherUpdateTime.none": "None",
"zp.refresherUpdateTime.today": "Today",
"zp.refresherUpdateTime.yesterday": "Yesterday",
"zp.systemLoading.title": "Loading..."
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"zp.refresher.default": "继续下拉刷新",
"zp.refresher.pulling": "松开立即刷新",
"zp.refresher.refreshing": "正在刷新...",
"zp.refresher.complete": "刷新成功",
"zp.loadingMore.default": "点击加载更多",
"zp.loadingMore.loading": "正在加载...",
"zp.loadingMore.noMore": "没有更多了",
"zp.loadingMore.fail": "加载失败,点击重新加载",
"zp.emptyView.title": "没有数据哦~",
"zp.emptyView.reload": "重新加载",
"zp.emptyView.error": "很抱歉,加载失败",
"zp.refresherUpdateTime.title": "最后更新:",
"zp.refresherUpdateTime.none": "无",
"zp.refresherUpdateTime.today": "今天",
"zp.refresherUpdateTime.yesterday": "昨天",
"zp.systemLoading.title": "加载中..."
}
{
"zp.refresher.default": "繼續下拉重繪",
"zp.refresher.pulling": "鬆開立即重繪",
"zp.refresher.refreshing": "正在重繪...",
"zp.refresher.complete": "重繪成功",
"zp.loadingMore.default": "點擊加載更多",
"zp.loadingMore.loading": "正在加載...",
"zp.loadingMore.noMore": "沒有更多了",
"zp.loadingMore.fail": "加載失敗,點擊重新加載",
"zp.emptyView.title": "沒有數據哦~",
"zp.emptyView.reload": "重新加載",
"zp.emptyView.error": "很抱歉,加載失敗",
"zp.refresherUpdateTime.title": "最後更新:",
"zp.refresherUpdateTime.none": "無",
"zp.refresherUpdateTime.today": "今天",
"zp.refresherUpdateTime.yesterday": "昨天",
"zp.systemLoading.title": "加載中..."
}
// [z-paging]useZPaging hooks
import { onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
function useZPaging(paging) {
const cPaging = !!paging ? paging.value || paging : null;
onPullDownRefresh(() => {
if (!cPaging || !cPaging.value) return;
cPaging.value.reload().catch(() => {});
})
onPageScroll(e => {
if (!cPaging || !cPaging.value) return;
cPaging.value.updatePageScrollTop(e.scrollTop);
e.scrollTop < 10 && cPaging.value.doChatRecordLoadMore();
})
onReachBottom(() => {
if (!cPaging || !cPaging.value) return;
cPaging.value.pageReachBottom();
})
}
export default useZPaging
\ No newline at end of file
// [z-paging]useZPagingComp hooks
function useZPagingComp(paging) {
const cPaging = !!paging ? paging.value || paging : null;
const reload = () => {
if (!cPaging || !cPaging.value) return;
cPaging.value.reload().catch(() => {});
}
const updatePageScrollTop = scrollTop => {
if (!cPaging || !cPaging.value) return;
cPaging.value.updatePageScrollTop(scrollTop);
}
const doChatRecordLoadMore = () => {
if (!cPaging || !cPaging.value) return;
cPaging.value.doChatRecordLoadMore();
}
const pageReachBottom = () => {
if (!cPaging || !cPaging.value) return;
cPaging.value.pageReachBottom();
}
return { reload, updatePageScrollTop, doChatRecordLoadMore, pageReachBottom };
}
export default useZPagingComp
\ No newline at end of file
// [z-paging]点击返回顶部view模块
import u from '.././z-paging-utils'
const ZPBackToTop = {
export default {
props: {
//自动显示点击返回顶部按钮,默认为否
autoShowBackToTop: {
type: Boolean,
default: u.gc('autoShowBackToTop', true)
default: u.gc('autoShowBackToTop', false)
},
//点击返回顶部按钮显示/隐藏的阈值(滚动距离),单位为px,默认为400rpx
backToTopThreshold: {
......@@ -53,56 +53,59 @@ const ZPBackToTop = {
return this.usePageScroll ? false : this.enableBackToTop;
},
finalBackToTopThreshold() {
return u.convertTextToPx(this.backToTopThreshold);
return u.convertToPx(this.backToTopThreshold);
},
finalBackToTopStyle() {
let tempBackToTopStyle = this.backToTopStyle;
if (!tempBackToTopStyle.bottom) {
tempBackToTopStyle.bottom = this.windowBottom + u.convertTextToPx(this.backToTopBottom) + 'px';
const backToTopStyle = this.backToTopStyle;
if (!backToTopStyle.bottom) {
backToTopStyle.bottom = this.windowBottom + u.convertToPx(this.backToTopBottom) + 'px';
}
if(!tempBackToTopStyle.position){
tempBackToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute';
if(!backToTopStyle.position){
backToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute';
}
return tempBackToTopStyle;
return backToTopStyle;
},
},
methods: {
//点击返回顶部
_backToTopClick() {
!this.backToTopWithAnimate && this._checkShouldShowBackToTop(1, 0);
let callbacked = false;
this.$emit('backToTopClick', toTop => {
(toTop === undefined || toTop === true) && this._handleToTop();
callbacked = true;
});
this.$nextTick(() => {
!callbacked && this._handleToTop();
})
},
//处理滚动到顶部
_handleToTop() {
!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
this.scrollToTop(this.backToTopWithAnimate);
},
//判断是否要显示返回顶部按钮
_checkShouldShowBackToTop(newVal, oldVal) {
_checkShouldShowBackToTop(scrollTop) {
if (!this.autoShowBackToTop) {
this.showBackToTopClass = false;
return;
}
if (newVal !== oldVal) {
if (newVal > this.finalBackToTopThreshold) {
if (scrollTop > this.finalBackToTopThreshold) {
if (!this.showBackToTopClass) {
this.showBackToTopClass = true;
this.lastBackToTopShowTime = new Date().getTime();
setTimeout(() => {
u.delay(() => {
this.backToTopClass = 'zp-back-to-top zp-back-to-top-show';
}, 300)
}
} else {
if (this.showBackToTopClass) {
const currentTime = new Date().getTime();
let dalayTime = 300;
if(currentTime - this.lastBackToTopShowTime < 500){
dalayTime = 0;
}
this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide';
setTimeout(() => {
u.delay(() => {
this.showBackToTopClass = false;
}, dalayTime)
}
}, new Date().getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300)
}
}
},
}
}
export default ZPBackToTop;
// [z-paging]通用布局相关模块
// #ifdef APP-NVUE
const weexDom = weex.requireModule('dom');
// #endif
export default {
data() {
return {
systemInfo: null,
cssSafeAreaInsetBottom: -1,
}
},
computed: {
windowTop() {
if (!this.systemInfo) return 0;
//暂时修复vue3中隐藏系统导航栏后windowTop获取不正确的问题,具体bug详见https://ask.dcloud.net.cn/question/141634
//感谢litangyu!!https://github.com/SmileZXLee/uni-z-paging/issues/25
// #ifdef VUE3 && H5
const pageHeadNode = document.getElementsByTagName("uni-page-head");
if (!pageHeadNode.length) return 0;
// #endif
return this.systemInfo.windowTop || 0;
},
safeAreaBottom() {
if (!this.systemInfo) return 0;
let safeAreaBottom = 0;
// #ifdef APP-PLUS
safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0 ;
// #endif
// #ifndef APP-PLUS
safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0);
// #endif
return safeAreaBottom;
},
isOldWebView() {
// #ifndef APP-NVUE || MP-KUAISHOU
try {
const systemInfos = uni.getSystemInfoSync().system.split(' ');
const deviceType = systemInfos[0];
const version = parseInt(systemInfos[1]);
if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) {
return true;
}
} catch(e) {
return false;
}
// #endif
return false;
},
zSlots() {
// #ifdef VUE2
// #ifdef MP-ALIPAY
return this.$slots;
// #endif
return this.$scopedSlots || this.$slots;
// #endif
return this.$slots;
}
},
methods: {
//获取节点尺寸
_getNodeClientRect(select, inDom = true, scrollOffset = false) {
// #ifdef APP-NVUE
select = select.replace(/[.|#]/g, '');
const ref = this.$refs[select];
return new Promise((resolve, reject) => {
if (ref) {
weexDom.getComponentRect(ref, option => {
resolve(option && option.result ? [option.size] : false);
})
} else {
resolve(false);
}
});
return;
// #endif
//#ifdef MP-ALIPAY
inDom = false;
//#endif
let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery();
scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect();
return new Promise((resolve, reject) => {
res.exec(data => {
resolve((data && data != '' && data != undefined && data.length) ? data : false);
});
});
},
//获取slot="left"和slot="right"宽度并且更新布局
_updateLeftAndRightWidth(targetStyle, parentNodePrefix) {
this.$nextTick(() => {
let delayTime = 0;
// #ifdef MP-BAIDU
delayTime = 10;
// #endif
setTimeout(() => {
['left','right'].map(position => {
this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then(res => {
this.$set(targetStyle, position, res ? res[0].width + 'px' : '0px');
});
})
}, delayTime)
})
},
//通过获取css设置的底部安全区域占位view高度设置bottom距离
_getCssSafeAreaInsetBottom(success) {
this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => {
this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
res && success && success();
});
}
}
}
// [z-paging]空数据图view模块
import u from '.././z-paging-utils'
const ZPEmptyView = {
export default {
props: {
//是否强制隐藏空数据图,默认为否
hideEmptyView: {
......@@ -78,19 +78,15 @@ const ZPEmptyView = {
return u.gc('emptyViewReloadStyle', {});
}
},
//空数据图片是否铺满z-paging,默认为是。若设置为否,则为填充满z-paging的剩余部分
//空数据图片是否铺满z-paging,默认为否,即填充满z-paging内列表(滚动区域)部分。若设置为否,则为填铺满整个z-paging
emptyViewFixed: {
type: Boolean,
default: function() {
return u.gc('emptyViewFixed', false)
}
default: u.gc('emptyViewFixed', false)
},
//空数据图片是否垂直居中,默认为是。emptyViewFixed为false时有效
//空数据图片是否垂直居中,默认为是,若设置为否即为从空数据容器顶部开始显示。emptyViewFixed为false时有效
emptyViewCenter: {
type: Boolean,
default: function() {
return u.gc('emptyViewCenter', true)
}
default: u.gc('emptyViewCenter', true)
},
//加载中时是否自动隐藏空数据图,默认为是
autoHideEmptyViewWhenLoading: {
......@@ -108,6 +104,11 @@ const ZPEmptyView = {
default: u.gc('emptyViewZIndex', 9)
},
},
data() {
return {
customerEmptyViewErrorText: ''
}
},
computed: {
finalEmptyViewImg() {
return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg;
......@@ -116,35 +117,36 @@ const ZPEmptyView = {
return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload;
},
showEmpty() {
if(this.refresherOnly || this.hideEmptyView || this.totalData.length) return false;
if(this.autoHideEmptyViewWhenLoading){
if (this.refresherOnly || this.hideEmptyView || this.realTotalData.length) return false;
if (this.autoHideEmptyViewWhenLoading) {
if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true;
}else{
} else {
return true;
}
if (!this.autoHideEmptyViewWhenPull && !this.isUserReload) return true;
return false;
return !this.autoHideEmptyViewWhenPull && !this.isUserReload;
},
},
methods: {
//点击了空数据view重新加载按钮
_emptyViewReload() {
let callbacked = false;
this.$emit('emptyViewReload', (reload) => {
this.$emit('emptyViewReload', reload => {
if (reload === undefined || reload === true) {
this.fromEmptyViewReload = true;
this.reload();
this.reload().catch(() => {});
}
callbacked = true;
});
this.$nextTick(() => {
if (!callbacked) {
this.fromEmptyViewReload = true;
this.reload();
this.reload().catch(() => {});
}
})
},
//点击了空数据view
_emptyViewClick() {
this.$emit('emptyViewClick');
},
}
}
\ No newline at end of file
export default ZPEmptyView;
// [z-paging]i18n模块
import { initVueI18n } from '@dcloudio/uni-i18n'
import messages from '../../i18n/index.js'
const { t } = initVueI18n(messages)
import u from '.././z-paging-utils'
import c from '.././z-paging-constant'
import zI18n from '.././z-paging-i18n'
import interceptor from '../z-paging-interceptor'
const systemInfo = uni.getSystemInfoSync();
const ZPI18n = {
props: {
//i18n国际化设置语言,支持简体中文(zh-cn)、繁体中文(zh-hant-cn)和英文(en)
language: {
type: String,
default: u.gc('language', '')
},
//i18n国际化默认是否跟随系统语言,默认为是
followSystemLanguage: {
type: Boolean,
default: u.gc('followSystemLanguage', true)
},
},
const language = uni.getSystemInfoSync().language;
export default {
data() {
return {
tempLanguageUpdateKey: 0,
language
}
},
computed: {
tempLanguage() {
let systemLanguage = false;
const temp = this.tempLanguageUpdateKey;
if (this.followSystemLanguage) {
systemLanguage = systemInfo.language;
}
return uni.getStorageSync(c.i18nUpdateKey) || systemLanguage || 'zh-cn';
},
finalTempLanguage() {
return this.language.length ? this.language : this.tempLanguage;
},
finalLanguage() {
let language = this.finalTempLanguage.toLowerCase();
return zI18n._getPrivateLanguage(language, this.followSystemLanguage);
try {
const local = uni.getLocale();
const language = this.language;
return local === 'auto' ? interceptor._handleLanguage2Local(language, this._language2Local(language)) : local;
} catch (e) {
return 'zh-Hans';
}
},
finalRefresherDefaultText() {
return this._getI18nText('refresherDefaultText', this.refresherDefaultText);
return this._getI18nText('zp.refresher.default', this.refresherDefaultText);
},
finalRefresherPullingText() {
return this._getI18nText('refresherPullingText', this.refresherPullingText);
return this._getI18nText('zp.refresher.pulling', this.refresherPullingText);
},
finalRefresherRefreshingText() {
return this._getI18nText('refresherRefreshingText', this.refresherRefreshingText);
return this._getI18nText('zp.refresher.refreshing', this.refresherRefreshingText);
},
finalRefresherCompleteText() {
return this._getI18nText('refresherCompleteText', this.refresherCompleteText);
return this._getI18nText('zp.refresher.complete', this.refresherCompleteText);
},
finalRefresherUpdateTimeTextMap() {
return {
title: t('zp.refresherUpdateTime.title'),
none: t('zp.refresherUpdateTime.none'),
today: t('zp.refresherUpdateTime.today'),
yesterday: t('zp.refresherUpdateTime.yesterday')
};
},
finalLoadingMoreDefaultText() {
return this._getI18nText('loadingMoreDefaultText', this.loadingMoreDefaultText);
return this._getI18nText('zp.loadingMore.default', this.loadingMoreDefaultText);
},
finalLoadingMoreLoadingText() {
return this._getI18nText('loadingMoreLoadingText', this.loadingMoreLoadingText);
return this._getI18nText('zp.loadingMore.loading', this.loadingMoreLoadingText);
},
finalLoadingMoreNoMoreText() {
return this._getI18nText('loadingMoreNoMoreText', this.loadingMoreNoMoreText);
return this._getI18nText('zp.loadingMore.noMore', this.loadingMoreNoMoreText);
},
finalLoadingMoreFailText() {
return this._getI18nText('loadingMoreFailText', this.loadingMoreFailText);
return this._getI18nText('zp.loadingMore.fail', this.loadingMoreFailText);
},
finalEmptyViewText() {
return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('emptyViewText', this.emptyViewText);
return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('zp.emptyView.title', this.emptyViewText);
},
finalEmptyViewReloadText() {
return this._getI18nText('emptyViewReloadText', this.emptyViewReloadText);
return this._getI18nText('zp.emptyView.reload', this.emptyViewReloadText);
},
finalEmptyViewErrorText() {
return this._getI18nText('emptyViewErrorText', this.emptyViewErrorText);
return this.customerEmptyViewErrorText || this._getI18nText('zp.emptyView.error', this.emptyViewErrorText);
},
finalSystemLoadingText() {
return this._getI18nText('zp.systemLoading.title', this.systemLoadingText);
},
methods: {
//设置i18n国际化语言
setI18n(language) {
zI18n.setLanguage(language);
},
methods: {
//获取当前z-paging的语言
getLanguage() {
return this.finalLanguage;
......@@ -90,9 +83,19 @@ const ZPI18n = {
} else if (dataType === '[object String]') {
return value;
}
return zI18n.t[key][this.finalLanguage];
},
return t(key);
},
//系统language转i18n local
_language2Local(language) {
const formatedLanguage = language.toLowerCase().replace(new RegExp('_', ''), '-');
if (formatedLanguage.indexOf('zh') !== -1) {
if (formatedLanguage === 'zh' || formatedLanguage === 'zh-cn' || formatedLanguage.indexOf('zh-hans') !== -1) {
return 'zh-Hans';
}
return 'zh-Hant';
}
if (formatedLanguage.indexOf('en') !== -1) return 'en';
return language;
}
}
}
export default ZPI18n;
// [z-paging]loading相关模块
import u from '.././z-paging-utils'
import Enum from '.././z-paging-enum'
export default {
props: {
//第一次加载后自动隐藏loading slot,默认为是
autoHideLoadingAfterFirstLoaded: {
type: Boolean,
default: u.gc('autoHideLoadingAfterFirstLoaded', true)
},
//loading slot是否铺满屏幕并固定,默认为否
loadingFullFixed: {
type: Boolean,
default: u.gc('loadingFullFixed', false)
},
//是否自动显示系统Loading:即uni.showLoading,若开启则将在刷新列表时(调用reload、refresh时)显示,下拉刷新和滚动到底部加载更多不会显示,默认为false。
autoShowSystemLoading: {
type: Boolean,
default: u.gc('autoShowSystemLoading', false)
},
//显示系统Loading时是否显示透明蒙层,防止触摸穿透,默认为是(H5、App、微信小程序、百度小程序有效)
systemLoadingMask: {
type: Boolean,
default: u.gc('systemLoadingMask', true)
},
//显示系统Loading时显示的文字,默认为"加载中"
systemLoadingText: {
type: [String, Object],
default: u.gc('systemLoadingText', null)
},
},
data() {
return {
loading: false,
loadingForNow: false,
}
},
watch: {
loadingStatus(newVal) {
this.$emit('loadingStatusChange', newVal);
this.$nextTick(() => {
this.loadingStatusAfterRender = newVal;
})
// #ifdef APP-NVUE
if (this.useChatRecordMode) {
if (this.pageNo === this.defaultPageNo && newVal === Enum.More.NoMore) {
this.nIsFirstPageAndNoMore = true;
return;
}
}
this.nIsFirstPageAndNoMore = false;
// #endif
},
loading(newVal){
if (newVal) {
this.loadingForNow = newVal;
}
},
},
computed: {
showLoading() {
if (this.firstPageLoaded || !this.loading || !this.loadingForNow) return false;
if (this.finalShowSystemLoading){
uni.showLoading({
title: this.finalSystemLoadingText,
mask: this.systemLoadingMask
})
}
return this.autoHideLoadingAfterFirstLoaded ? (this.fromEmptyViewReload ? true : !this.pagingLoaded) : this.loadingType === Enum.LoadingType.Refresher;
},
finalShowSystemLoading() {
return this.autoShowSystemLoading && this.loadingType === Enum.LoadingType.Refresher;
}
},
methods: {
//处理开始加载更多状态
_startLoading(isReload = false) {
if ((this.showLoadingMoreWhenReload && !this.isUserPullDown) || !isReload) {
this.loadingStatus = Enum.More.Loading;
}
this.loading = true;
},
//停止系统loading和refresh
_endSystemLoadingAndRefresh(){
this.finalShowSystemLoading && uni.hideLoading();
!this.useCustomRefresher && uni.stopPullDownRefresh();
// #ifdef APP-NVUE
this.usePageScroll && uni.stopPullDownRefresh();
// #endif
}
}
}
......@@ -5,19 +5,14 @@ let getedStorage = false;
const storageKey = 'Z-PAGING-CONFIG-STORAGE-KEY'
function setConfig(value) {
try {
uni.setStorageSync(storageKey, value);
} catch (e) {}
}
function getConfig() {
try {
if (getedStorage) return config;
config = uni.getStorageSync(storageKey);
getedStorage = true;
} catch (e) {
return null;
}
return config;
}
export default {
......
// [z-paging]常量
export default {
version: '2.6.3',
delayTime: 100,
errorUpdateKey: 'z-paging-error-emit',
completeUpdateKey: 'z-paging-complete-emit',
cachePrefixKey: 'z-paging-cache',
listCellIndexKey: 'zp_index',
listCellIndexUniqueKey: 'zp_unique_index'
}
// [z-paging]枚举
const Enum = {
export default {
//当前加载类型 0.下拉刷新 1.上拉加载更多
LoadingType: {
Refresher: 0,
......@@ -26,7 +26,19 @@ const Enum = {
Reload: 1,
Refresh: 2,
LoadingMore: 3
},
//虚拟列表cell高度模式
CellHeightMode: {
//固定高度
Fixed: 'fixed',
//动态高度
Dynamic: 'dynamic'
},
//列表缓存模式
CacheMode: {
//默认模式,只会缓存一次
Default: 'default',
//总是缓存,每次列表刷新(下拉刷新、调用reload等)都会更新缓存
Always: 'always'
}
}
\ No newline at end of file
export default Enum;
// [z-paging]拦截器
//拦截&处理@query事件
function handleQuery(callback) {
try {
setTimeout(function() {
_getApp().globalData.zp_handleQueryCallback = callback;
}, 1);
} catch (e) {}
}
//拦截&处理@query事件(私有,请勿调用)
function _handleQuery(pageNo, pageSize, from, lastItem){
const callback = _getApp().globalData.zp_handleQueryCallback;
return callback ? callback(pageNo, pageSize, from, lastItem) : [pageNo, pageSize, from];
}
//拦截&处理系统language转i18n local
function handleLanguage2Local(callback) {
try {
setTimeout(function() {
_getApp().globalData.zp_handleLanguage2LocalCallback = callback;
}, 1);
} catch (e) {}
}
//拦截&处理系统language转i18n local(私有,请勿调用)
function _handleLanguage2Local(language, local){
const callback = _getApp().globalData.zp_handleLanguage2LocalCallback;
return callback ? callback(language, local) : local;
}
//获取当前app对象
function _getApp(){
// #ifndef APP-NVUE
return getApp();
// #endif
// #ifdef APP-NVUE
return getApp({ allowDefault: true });
// #endif
}
export default {
handleQuery,
_handleQuery,
handleLanguage2Local,
_handleLanguage2Local
};
// [z-paging]使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
const ZPagingMixin = {
export default {
onPullDownRefresh() {
if (this.isPagingRefNotFound()) return;
this.$refs.paging.reload();
this.$refs.paging.reload().catch(() => {});
},
onPageScroll(e) {
if (this.isPagingRefNotFound()) return;
this.$refs.paging.updatePageScrollTop(e.scrollTop);
if (e.scrollTop < 10) {
this.$refs.paging.doChatRecordLoadMore();
}
e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore();
},
onReachBottom() {
if (this.isPagingRefNotFound()) return;
this.$refs.paging.doLoadMore();
this.$refs.paging.pageReachBottom();
},
methods: {
isPagingRefNotFound() {
return !this.$refs.paging || this.$refs.paging === undefined;
return !this.$refs.paging;
}
}
}
export default ZPagingMixin;
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment