lipenggao/app_ancientSayings
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化阅读页面

Browse Source
This commit is contained in:
lipnggao 2023-09-21 14:49:07 +08:00
parent 2c18c9ec0d
commit 184e85da84
24 changed files with 6549 additions and 3969 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

362
pages/novelReading/novelReading.vue
View File

@ -12,33 +12,29 @@
:line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg" :line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg"
:slide="20" :enablePreload="false" @loadmore="loadmoreContent" @preload="preloadContent" :slide="20" :enablePreload="false" @loadmore="loadmoreContent" @preload="preloadContent"
@change="currentChange" @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher" @change="currentChange" @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher"
@clickTo="handelShowStepUp" :clickOption="{width:200,height: 400,left:'auto',top:'auto'}"> @clickTo="handelShowStepUp" :clickOption="{width:200,height: 400,left:'auto',top:'auto'}"
@handelPurchaseFull="handelPurchaseFull">
<template #test>
<view class="balance_con">
<rich-text class="balance_con_rich_text"
:style="`color:${novelContentColor};font-size:${newCharactersSize}px;`"
:nodes="readChapterInfoObj.content"></rich-text>
<view class="balance_recharge_option"></view>
<view class="balance_recharge" :style="`background:${bodyReadingBg}`">
<view class="balance_tips" :style="`color:${novelContentColor}`">
付费章节，需要购买。{{readChapterInfoObj.price}}书币</view>
<view class="balance_btn_all">
<view v-if="!token" class="purchaseFull_popup_btn" @click="toPathLogin">新用户登录</view>
<view v-else class="purchaseFull_popup_btn" @click="handelPurchaseFull">需要全本购买
</view>
</view>
</view>
</view>
</template>
</yingbing-ReadPage> </yingbing-ReadPage>
</view> </view>
</view> </view>
<view class="u_popup_all"> <view class="u_popup_all">
<u-popup :show="tabBarPopupShow" mode="bottom" :overlay="false" zIndex="6" :bgColor="bodyReadingBg">
<view class="my_tabBar_Reading" :style="`background:${bodyReadingBg}`">
<view class="tabBar_Reading_item">
<view class="reading_item_icon" @tap="handelDirectoryPopup">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].directory_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">目录</view>
</view>
<view class="tabBar_Reading_item">
<view class="reading_item_icon" @tap="toBookshelf">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].bookshelf_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">书城</view>
</view>
<view class="tabBar_Reading_item" @tap="handelSteUpPopup">
<view class="reading_item_icon">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].step_up_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">设置</view>
</view>
</view>
</u-popup>
<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent"> <u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent">
<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`"> <view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
<view class="reading_schedule_body"> <view class="reading_schedule_body">
@ -52,7 +48,26 @@
@tap="nextChapter">下一章 @tap="nextChapter">下一章
</view> </view>
</view> </view>
<view style="height: 140rpx" /> <view class="my_tabBar_Reading" :style="`background:${bodyReadingBg}`">
<view class="tabBar_Reading_item">
<view class="reading_item_icon" @tap="handelDirectoryPopup">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].directory_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">目录</view>
</view>
<view class="tabBar_Reading_item">
<view class="reading_item_icon" @tap="toBookshelf">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].bookshelf_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">书城</view>
</view>
<view class="tabBar_Reading_item" @tap="handelSteUpPopup">
<view class="reading_item_icon">
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].step_up_icon"></image>
</view>
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">设置</view>
</view>
</view>
</view> </view>
</u-popup> </u-popup>
<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5"> <u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5">
@ -103,7 +118,7 @@
</scroll-view> </scroll-view>
</view> </view>
</u-popup> </u-popup>
<u-popup :show="purchaseFullShow" @close="purchaseFullClose" mode="bottom" overlayStyle="top:44px"> <!-- <u-popup :show="purchaseFullShow" @close="purchaseFullClose" mode="bottom" overlayStyle="top:44px">
<view class="purchaseFull_popup_box" :style="`background:${bodyReadingBg}`"> <view class="purchaseFull_popup_box" :style="`background:${bodyReadingBg}`">
<view> <view>
<CommBookLeftRigth :bookTips="bookInfo.category_name" :bookName="bookInfo.title" <CommBookLeftRigth :bookTips="bookInfo.category_name" :bookName="bookInfo.title"
@ -113,9 +128,9 @@
<view class="purchaseFull_popup_btn" @tap="handelPurchaseFull">需要全本购买</view> <view class="purchaseFull_popup_btn" @tap="handelPurchaseFull">需要全本购买</view>
</view> </view>
</view> </view>
</u-popup> </u-popup> -->
<u-modal :show="balanceShow" :title="balanceTitle" content='余额不足,请充值...' <!-- <u-modal :show="balanceShow" :title="balanceTitle" content='余额不足,请充值...'
:showCancelButton="!readChapterFlag" @confirm="balanceConfirm" @cancel="balanceCancel" /> :showCancelButton="!readChapterFlag" @confirm="balanceConfirm" @cancel="balanceCancel" /> -->
</view> </view>
</view> </view>
</template> </template>
@ -149,6 +164,7 @@
}, },
data() { data() {
return { return {
token: '',
navbarTitle: '小说阅读页面', navbarTitle: '小说阅读页面',
novelMainTypeColor: '', novelMainTypeColor: '',
setUpColorAll: {}, setUpColorAll: {},
@ -165,7 +181,6 @@
bodyReadingBg: '', bodyReadingBg: '',
// 底部安全区 // 底部安全区
// bottomSecureHeight: 0, // bottomSecureHeight: 0,
tabBarPopupShow: false,
readingPopupshow: false, readingPopupshow: false,
stepUpPopupShow: false, stepUpPopupShow: false,
purchaseFullShow: false, purchaseFullShow: false,
@ -189,7 +204,7 @@
directoryPopupShow: false, directoryPopupShow: false,
// 小说信息 // 小说信息
novelReadingContentText: [], novelReadingContentText: [],
charactersPageType: 'real', charactersPageType: 'reals',
defaultCharactersSize: 28, defaultCharactersSize: 28,
newCharactersSize: 28, newCharactersSize: 28,
defaultCharactersLineHeight: 20, defaultCharactersLineHeight: 20,
@ -211,23 +226,25 @@
this.readChapterid = options.id; this.readChapterid = options.id;
}, },
onShow() { onShow() {
const token = myGetStorage('token');
this.token = token;
const bookSid = this.booksDirectorySid; const bookSid = this.booksDirectorySid;
const data = { // const data = {
sid: bookSid, // sid: bookSid,
} // }
uni.$u.http.post('/bookdetails', data).then((res) => { // uni.$u.http.post('/bookdetails', data).then((res) => {
uni.hideLoading(); // uni.hideLoading();
if (res.status == 1) { // if (res.status == 1) {
const info = res.data.info; // const info = res.data.info;
const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`; // const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`;
this.bookInfo = { // this.bookInfo = {
...info, // ...info,
cover // cover
}; // };
} // }
}).catch((err) => { // }).catch((err) => {
uni.hideLoading(); // uni.hideLoading();
}) // })
this.isGetUserRead(); this.isGetUserRead();
}, },
methods: { methods: {
@ -277,23 +294,23 @@
title: resData.chaptername, title: resData.chaptername,
isTtitle: resData.title isTtitle: resData.title
// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}` // richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
}; };
this.readChapterInfoObj = readChapterInfoObj; this.readChapterInfoObj = readChapterInfoObj;
if (readChapterInfoObj.chackpay == 1) { resolve(readChapterInfoObj);
resolve(readChapterInfoObj); // if (readChapterInfoObj.chackpay == 1) {
} else if (readChapterInfoObj.chackpay == 2) {
this.balanceShow = true; // } else if (readChapterInfoObj.chackpay == 2) {
this.balanceTitle = '下一章，付费章节'; // this.balanceShow = true;
if (isShowLoading) { // this.balanceTitle = '下一章，付费章节';
this.readChapterFlag = true; // if (isShowLoading) {
} // this.readChapterFlag = true;
} else if (readChapterInfoObj.chackpay == 3) { // }
this.purchaseFullShow = true; // } else if (readChapterInfoObj.chackpay == 3) {
if (isShowLoading) { // this.purchaseFullShow = true;
this.readChapterFlag = true; // if (isShowLoading) {
} // this.readChapterFlag = true;
} // }
// }
} }
}).catch((err) => { }).catch((err) => {
uni.hideLoading(); uni.hideLoading();
@ -303,34 +320,64 @@
}, },
async loadmoreContent(chapter, callback) { async loadmoreContent(chapter, callback) {
console.log(chapter, "*****************")
const newReadDirectoryActive = this.readDirectoryActive; const newReadDirectoryActive = this.readDirectoryActive;
const newReadChapterLastid = this.readChapterLastid; const newReadChapterLastid = this.readChapterLastid;
const newNovelReadingContentText = this.novelReadingContentText; const newNovelReadingContentText = this.novelReadingContentText;
const newReadChapterNextid = this.readChapterNextid; const newReadChapterNextid = this.readChapterNextid;
console.log(newNovelReadingContentText,"newNovelReadingContentText") console.log(chapter, newReadDirectoryActive, "loadmoreContent")
// const itemTemp = newNovelReadingContentText.filter((m) => m.chapter == parseInt(chapter + 1)); if (chapter != 1) {
// console.log(itemTemp,itemTemp[0].lastid, "itemTempitemTempitemTemp")
if (newReadDirectoryActive != 1) {
if (chapter < newReadDirectoryActive) { if (chapter < newReadDirectoryActive) {
// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].lastid);
const readChapterInfoObj = await this.isGetBookInfo(newReadChapterLastid); const readChapterInfoObj = await this.isGetBookInfo(newReadChapterLastid);
console.log(readChapterInfoObj, "上一章")
this.novelReadingContentText = [...newNovelReadingContentText, readChapterInfoObj]; this.novelReadingContentText = [...newNovelReadingContentText, readChapterInfoObj];
this.readDirectoryActive = chapter; this.readDirectoryActive = chapter;
// this.readChapterLastid = readChapterInfoObj.lastid; if (readChapterInfoObj.chackpay == 1) {
// this.readChapterNextid = readChapterInfoObj.nextid; callback('success', readChapterInfoObj)
callback('success', readChapterInfoObj) }
const obj = {
...readChapterInfoObj,
custom,
content: ''
}
console.log(obj, "objobj")
callback('success', obj)
} }
if (chapter > newReadDirectoryActive) { if (chapter > newReadDirectoryActive) {
// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].nextid);
const readChapterInfoObj = await this.isGetBookInfo(newReadChapterNextid); const readChapterInfoObj = await this.isGetBookInfo(newReadChapterNextid);
console.log(readChapterInfoObj, "下一章")
this.novelReadingContentText = [readChapterInfoObj, ...newNovelReadingContentText]; this.novelReadingContentText = [readChapterInfoObj, ...newNovelReadingContentText];
this.readDirectoryActive = chapter; this.readDirectoryActive = chapter;
// this.readChapterLastid = readChapterInfoObj.lastid; if (readChapterInfoObj.chackpay == 1) {
// this.readChapterNextid = readChapterInfoObj.nextid; callback('success', readChapterInfoObj)
callback('success', readChapterInfoObj) }
if (readChapterInfoObj.chackpay == 2) {
const novelContentColor = this.novelContentColor;
const newCharactersSize = this.newCharactersSize;
const bodyReadingBg = this.bodyReadingBg;
//
const custom = [`slot:test`]
// const custom = [
// `<div class="balance_con">
// <div class="balance_con_rich_text"
// style="color:${novelContentColor};font-size:${newCharactersSize}px;"
// >${readChapterInfoObj.content}</div>
// <div class="balance_recharge_option"></div>
// <div class="balance_recharge" style="background:${bodyReadingBg}">
// <div class="balance_tips" style="color:${novelContentColor}">
// 付费章节，需要购买。${readChapterInfoObj.price}书币</div>
// <div class="balance_btn_all">
// <div class="purchaseFull_popup_btn" onclick="handelPurchaseFull">需要全本购买</div>
// </div>
// </div>
// </div>`
// ]
const obj = {
...readChapterInfoObj,
custom,
content: ''
}
console.log(obj, "objobj")
callback('success', obj)
}
} }
} }
}, },
@ -341,19 +388,30 @@
this.readChapterLastid = itemTemp[0].lastid; this.readChapterLastid = itemTemp[0].lastid;
this.readChapterNextid = itemTemp[0].nextid; this.readChapterNextid = itemTemp[0].nextid;
}, },
previousChapter() { async previousChapter() {
const readChapterLastid = this.readChapterLastid const newReadDirectoryActive = this.readDirectoryActive;
if (!readChapterLastid) { const newReadChapterLastid = this.readChapterLastid;
const newNovelReadingContentText = this.novelReadingContentText;
if (!newReadChapterLastid) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: "已经是第一章了" title: "已经是第一章了"
}) })
return return
} }
this.isGetBookInfo(readChapterLastid, 'previousChapter'); const readChapterInfoObj = await this.isGetBookInfo(newReadChapterLastid);
this.novelReadingContentText = [readChapterInfoObj];
this.$refs.yingbingReadPage.init({
contents: [readChapterInfoObj],
start: 0,
currentChapter: newReadDirectoryActive - 1
})
this.readDirectoryActive = newReadDirectoryActive - 1;
}, },
nextChapter() { async nextChapter() {
const newReadDirectoryActive = this.readDirectoryActive;
const readChapterNextid = this.readChapterNextid; const readChapterNextid = this.readChapterNextid;
const newNovelReadingContentText = this.novelReadingContentText;
if (!readChapterNextid) { if (!readChapterNextid) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
@ -361,11 +419,17 @@
}) })
return return
} }
this.isGetBookInfo(readChapterNextid, 'nextChapter'); const readChapterInfoObj = await this.isGetBookInfo(readChapterNextid);
this.novelReadingContentText = [readChapterInfoObj];
this.$refs.yingbingReadPage.init({
contents: [readChapterInfoObj],
start: 0,
currentChapter: newReadDirectoryActive + 1
})
this.readDirectoryActive = newReadDirectoryActive + 1;
}, },
handelDirectoryItem(row) {}, handelDirectoryItem(row) {},
handelShowStepUp() { handelShowStepUp() {
this.tabBarPopupShow = !this.tabBarPopupShow;
this.readingPopupshow = !this.readingPopupshow; this.readingPopupshow = !this.readingPopupshow;
this.stepUpPopupShow = false; this.stepUpPopupShow = false;
}, },
@ -377,6 +441,13 @@
url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readDirectoryActive}` url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readDirectoryActive}`
}) })
}, },
toPathLogin() {
const readChapterInfoObj = this.readChapterInfoObj;
const readDirectoryActive = this.readDirectoryActive;
uni.navigateTo({
url: `/pages/login/login?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readDirectoryActive}`
})
},
directoryPopupClose() { directoryPopupClose() {
// this.directoryPopupShow = false; // this.directoryPopupShow = false;
// const readChapterInfoObj = this.readChapterInfoObj; // const readChapterInfoObj = this.readChapterInfoObj;
@ -545,30 +616,6 @@
}) })
} }
}, },
onPullDownRefresh() {
// const isReadDirectoryActive = this.readDirectoryActive;
// if(isReadDirectoryActive == 0) {
// uni.showToast({
// icon:'none',
// title:"已经是第一章了"
// })
// uni.stopPullDownRefresh()
// return
// }
// const readDirectoryActive = isReadDirectoryActive- 1;
// const novelReadingContentText = this.myData[readDirectoryActive];
// this.novelReadingContentText = [novelReadingContentText, ...this.novelReadingContentText];
// // setTimeout(() => {
// this.computeRichText = this.myData[readDirectoryActive].content;
// // this.readDirectoryActive = readDirectoryActive;
// const query = uni.createSelectorQuery().in(this);
// this.$nextTick(() => {
// query.select(`#compute_rich_text`).boundingClientRect((data) => {
// this.isScrollTop = parseInt(data.height) - 30;
// }).exec();
// });
// uni.stopPullDownRefresh()
},
created() { created() {
const novelMainObj = myGetStorage('novelMainObj') || '{}'; const novelMainObj = myGetStorage('novelMainObj') || '{}';
const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9'; const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9';
@ -581,17 +628,6 @@
this.novelMainTypeColor = novelMainTypeColor; this.novelMainTypeColor = novelMainTypeColor;
this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 28; this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 28;
this.bodyReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 22; this.bodyReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
// 不需要
// this.scrollReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 38;
// this.scrollReadingHeight = windowHeight - (screenWidth / 375) * 54;
// // #ifdef APP-PLUS
// this.directoryPopupHeight = screenHeight - statusBarHeight;
// // #endif
// // #ifdef H5 || MP-WEIXIN
// this.directoryPopupHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
// // #endif
// this.bottomSecureHeight = screenHeight - windowHeight;
this.setUpColorAll = setUpReadingColorAll; this.setUpColorAll = setUpReadingColorAll;
this.barPopupIcon = { this.barPopupIcon = {
'F3EFE9': { 'F3EFE9': {
@ -631,6 +667,96 @@
margin-top: 40rpx; margin-top: 40rpx;
} }
/deep/.balance_con {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.balance_con_rich_text {
width: 100%;
height: 80%;
line-height: 2;
overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 10;
// -webkit-box-orient: vertical;
}
.balance_recharge_option {
position: fixed;
bottom: 0;
left: 0;
width: 414px;
height: 560rpx;
// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
background: rgba(243, 239, 233, 0.7);
filter: blur(10px);
// user-select: none;
// opacity: 0.6;
// background: #fff;
// background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 80%);
}
// .balance_recharge_option::after {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// content: '';
// display: block;
// }
.balance_recharge {
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
position: fixed;
bottom: 0rpx;
left: 0;
width: 100%;
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
height: 360rpx;
border-radius: 24rpx 24rpx 0 0;
padding: 32rpx;
box-sizing: border-box;
// background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);
// background: rgba(255, 255, 255, 0.2);
// filter: blur(5px);
// user-select: none;
// box-shadow: 0 -20rpx 20rpx rgba(0, 0, 0, 0.2);
.balance_tips {
font-size: 30rpx;
}
.balance_btn_all {
// display: flex;
// justify-content: center;
// align-items: center;
margin-top: 32rpx;
.purchaseFull_popup_btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 84rpx;
font-size: 30rpx;
color: #fff;
background: linear-gradient(to top, #FBA676, #E95E32);
border-radius: 24rpx;
}
}
}
}
.novelReading_content::v-deep.u-navbar__content__title { .novelReading_content::v-deep.u-navbar__content__title {
font-size: 30rpx; font-size: 30rpx;
} }

40
uni_modules/yingbing-ReadPage/changelog.md
View File

@ -1,3 +1,43 @@
## 1.5.9（2023-09-01）
* 修复滚动模式下计算滚动位置异常的问题
## 1.5.8（2023-08-23）
* 修复APP-VUE翻页翻往下一章时可能会出现的undefined
## 1.5.7（2023-08-21）
* 增加split属性，用于分隔字符串排版，适用于英文小说
* measureSize属性中将英文字母大小拆分成小写英文字母和大写英文字母大小
## 1.5.6（2023-07-24）
* 解决bgColor属性无效的问题
## 1.5.5（2023-07-22）
* 请注意此次更新将翻页功能抽出来，插件本身只有滚动阅读功能，如果需要翻页功能请下载新插件好用翻页组件配合使用，下载地址看使用介绍
* 此次更新未更新新功能，不想多下载插件的朋友可以不更新
## 1.5.4（2023-07-10）
* 增加firstTipUnable、lastTipUnable属性控制第一页提示页和最后一页提示页的显示
## 1.5.3（2023-07-08）
* 自定义插槽添加作用域插槽，可以获取当前页信息，用于动态绑定内容（不支持微信小程序）
## 1.5.2（2023-07-07）
* 增加firstTip，lastTip属性自定义第一页和最后一页提示文字
* 增加top、bottom插槽，自定义第一页和最后一页的页面
## 1.5.1（2023-07-07）
* 新增unableClickPage属性控制点击左右2侧翻页
## 1.5.0（2023-06-20）
* 修复微信小程序报错的问题
## 1.4.9（2023-06-14）
* 修复向前翻页页面抖动的问题
* 优化loadmore事件返回回调为fail或者timeout时的显示
* 优化change事件，不再强制传contents
## 1.4.8（2023-06-12）
* 修复h5，APP-VUE自定义页面添加点击事件无法点击的问题
## 1.4.7（2023-06-07）
* 优化h5电量显示，避免报错
## 1.4.6（2023-06-07）
* 新增自动翻页功能
* 优化页面刷新逻辑，减少报错
## 1.4.5（2023-05-27）
* 添加字符宽度自动测量功能，减少排版错误
* 新增measureSize属性，用于自定义字符宽度
## 1.4.4（2023-05-26）
* 翻页模式添加touchcancel事件
* 为兼容IOS空格计算宽度增加1px
## 1.4.3（2023-05-25） ## 1.4.3（2023-05-25）
* 新增fontFamily属性设置字体名称 * 新增fontFamily属性设置字体名称
* 新增fontFace属性添加自定义字体 * 新增fontFace属性添加自定义字体

5
uni_modules/yingbing-ReadPage/components/modules/battery.vue
View File

@ -34,13 +34,14 @@
} }
}, },
// #endif // #endif
mounted () { created () {
this.getBattery() this.getBattery()
}, },
methods: { methods: {
getBattery () { getBattery () {
// #ifdef H5 // #ifdef H5
window.navigator.getBattery().then((res) => { //window.navigator.getBattery只能在安全环境下（比如：https file:///url）使用，判断一下避免报错
window.navigator.getBattery && window.navigator.getBattery().then((res) => {
// 电池电量在0到1之间，因此我们将其乘以100得出百分比 // 电池电量在0到1之间，因此我们将其乘以100得出百分比
this.value = res.level * 54 this.value = res.level * 54
}); });

14
uni_modules/yingbing-ReadPage/components/modules/computed/computed.css Normal file
View File

@ -0,0 +1,14 @@
.computed {
position: fixed;
top: -1000rpx;
left: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
}
.computed-text {
font-size: 20px;
flex-shrink: 0;
}

287
uni_modules/yingbing-ReadPage/components/modules/computed/computed.js
View File

@ -1,8 +1,22 @@
import Util from '../../../js_sdk/util.js' import Util from '../../../js_sdk/util.js'
export default { export default {
props: {
measureSize: {
type: Object,
default () {
return new Object
}
}
},
data () { data () {
return { return {
computedResolve: null computedResolve: null,
chineseSize: 0,
spaceSize: 0,
lowerSize: 0,
upperSize: 0,
numberSize: 0,
specialSize: 0
} }
}, },
methods: { methods: {
@ -49,29 +63,62 @@ export default {
text = new String(text); text = new String(text);
text = text.split(''); text = text.split('');
let width = 0; let width = 0;
text.forEach(function(item) { text.forEach((item) => {
if (/[a-zA-Z]/.test(item)) { if (/[a-z]/.test(item)) {
width += 7; width += this.measureSize.lower || this.lowerSize || 7
} else if (/[0-9]/.test(item)) { } else if ( /[A-Z]/.test(item) ) {
width += 5.5; width += this.measureSize.upper || this.upperSize || 7
} else if (/\./.test(item)) { } else if (/[0-9]/.test(item)) {
width += 2.7; width += this.measureSize.number || this.numberSize || 5.5
} else if (/-/.test(item)) {
width += 3.25;
} else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配 } else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
width += 10; width += this.measureSize.chinese || this.chineseSize || 10
} else if (/\(|\)/.test(item)) {
width += 3.73;
} else if (/\s/.test(item)) { } else if (/\s/.test(item)) {
width += 2.5; width += this.measureSize.space || this.spaceSize || 3.5
} else if (/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(item)) { } else if (/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(item)) {
width += 8; width += this.measureSize.special || this.specialSize || 8
} else { } else {
width += 10; width += this.measureSize.other || this.chineseSize || 10
} }
}); });
return width * fontSize / 10; return width * fontSize / 10;
}, },
getComputedTextSize (selector, el) {
let arr = []
arr.push(Util.getRect('.computed-text-chinese', this.$refs.computedTextChinese, this))
arr.push(Util.getRect('.computed-text-space', this.$refs.computedTextSpace, this))
arr.push(Util.getRect('.computed-text-lower', this.$refs.computedTextLower, this))
arr.push(Util.getRect('.computed-text-upper', this.$refs.computedTextUpper, this))
arr.push(Util.getRect('.computed-text-number', this.$refs.computedTextNumber, this))
arr.push(Util.getRect('.computed-text-special', this.$refs.computedTextSpecial, this))
Promise.all(arr).then(ress => {
ress.forEach((res, key) => {
if ( key == 0 ) {
this.chineseSize = res.width * (10 / 20)
}
if ( key == 1 ) {
this.spaceSize = res.width * (10 / 20)
}
if ( key == 2 ) {
this.lowerSize = res.width * (10 / 20)
}
if ( key == 3 ) {
this.upperSize = res.width * (10 / 20)
}
if ( key == 4 ) {
this.numberSize = res.width * (10 / 20)
}
if ( key == 5 ) {
this.specialSize = res.width * (10 / 20)
}
// console.log('chineseSize', this.chineseSize);
// console.log('spaceSize', this.spaceSize);
// console.log('lowerSize', this.lowerSize);
// console.log('upperSize', this.upperSize);
// console.log('numberSize', this.numberSize);
// console.log('specialSize', this.specialSize);
})
})
},
async computedText (data, start) { async computedText (data, start) {
let rect = await this.getRect() let rect = await this.getRect()
let viewWidth = rect.width - (this.options.slide * 2) let viewWidth = rect.width - (this.options.slide * 2)
@ -91,32 +138,41 @@ export default {
text: [] text: []
} }
let length = 0; let length = 0;
let contentSync = data.content.substr(start); let contentSync = data.content.substr(start).replace(/\t/g, ' ').replace(/　/g, ' ');
let lastIndex = 0; let lastIndex = 0;
while ( (pageHeight + this.options.fontSize + this.options.lineHeight) <= viewHeight ) { while ( (pageHeight + this.options.fontSize + this.options.lineHeight) <= viewHeight ) {
strs.push(''); strs.push('');
let lineWidth = 0; let lineWidth = 0;
let charText = ''
for ( let i = lastIndex; i < contentSync.length; i++ ) { for ( let i = lastIndex; i < contentSync.length; i++ ) {
if ( JSON.stringify(contentSync[i]) == JSON.stringify('\r') || JSON.stringify(contentSync[i]) == JSON.stringify('\n') ) { const char = contentSync.charAt(i)
length += 1 if ( JSON.stringify(char) == JSON.stringify('\r') || JSON.stringify(char) == JSON.stringify('\n') ) {
lineWidth += this.measureText(charText, this.options.fontSize);
if ( lineWidth >= viewWidth ) {
lastIndex = i - charText.length+ 1;
break;
}
strs[strs.length - 1] += charText
length += charText.length + 1
page.end = page.start + length; page.end = page.start + length;
lastIndex = i + 1; lastIndex = i + 1;
break; break;
} }
lineWidth += JSON.stringify(contentSync[i]) == JSON.stringify('\t') ? 0 : this.measureText(contentSync[i], this.options.fontSize); charText += char
if ( lineWidth >= viewWidth ) { if ( !this.split || char == this.split ) {
lastIndex = i; lineWidth += this.measureText(charText, this.options.fontSize);
break; if ( lineWidth >= viewWidth ) {
} else { lastIndex = i - charText.length+ 1;
if ( JSON.stringify(contentSync[i]) != JSON.stringify('\t') ) { break;
strs[strs.length - 1] += contentSync[i].replace('　', ' ')
length += 1
page.end = page.start + length
} }
strs[strs.length - 1] += charText
length += charText.length
page.end = page.start + length
charText = ''
} }
} }
pageHeight += this.options.fontSize + this.options.lineHeight; pageHeight += this.options.fontSize + this.options.lineHeight;
if ( page.end >= data.content.replace(/\t/g, '').length - 1 ) { if ( page.end >= data.content.length - 1 ) {
page.isLastPage = true; page.isLastPage = true;
break; break;
} }
@ -188,22 +244,48 @@ export default {
arr = arr.concat(pages) arr = arr.concat(pages)
if (i == contents.length - 1) { if (i == contents.length - 1) {
if ( this.options.pageType != 'scroll' ) { if ( this.options.pageType != 'scroll' ) {
arr.unshift({ if ( !this.firstTipUnable ) {
title: contents[0].title || '', arr.unshift({
chapter: contents[0].chapter, title: contents[0].title || '',
type: contents[0].isStart ? 'top' : 'prevLoading', chapter: contents[0].chapter,
dataId: arr[0].dataId - 1, type: contents[0].isStart ? 'top' : 'loading',
start: 0, direction: 'prev',
end: 0 dataId: arr[0].dataId - 1,
}) start: 0,
arr.push({ end: 0
title: item.title || '', })
chapter: item.chapter, } else if ( !contents[0].isStart ) {
type: item.isEnd ? 'bottom' : 'nextLoading', arr.unshift({
dataId: arr[arr.length - 1].dataId + 1, title: contents[0].title || '',
start: 0, chapter: contents[0].chapter,
end: 0 type: 'loading',
}) direction: 'prev',
dataId: arr[0].dataId - 1,
start: 0,
end: 0
})
}
if ( !this.lastTipUnable ) {
arr.push({
title: item.title || '',
chapter: item.chapter,
type: item.isEnd ? 'bottom' : 'loading',
direction: 'next',
dataId: arr[arr.length - 1].dataId + 1,
start: 0,
end: 0
})
} else if ( !contents[0].isEnd ) {
arr.push({
title: item.title || '',
chapter: item.chapter,
type: 'loading',
direction: 'next',
dataId: arr[arr.length - 1].dataId + 1,
start: 0,
end: 0
})
}
} }
this.pages = arr this.pages = arr
if ( this.options.pageType == 'scroll' ) { if ( this.options.pageType == 'scroll' ) {
@ -211,7 +293,8 @@ export default {
} }
this.$nextTick(() => { this.$nextTick(() => {
if ( this.options.pageType != 'scroll' ) { if ( this.options.pageType != 'scroll' ) {
this.onChange(this.currentDataId); this.$refs.flip.refresh()
this.handleFlipChange(this.currentDataId);
} else { } else {
setTimeout(() => { setTimeout(() => {
Util.getRect('#scroll-item_' + this.currentDataId, Util.getRefs(this, 'scrollItem_' + this.currentDataId, 0), this).then(rect => { Util.getRect('#scroll-item_' + this.currentDataId, Util.getRefs(this, 'scrollItem_' + this.currentDataId, 0), this).then(rect => {
@ -235,41 +318,69 @@ export default {
computedPage(e) { computedPage(e) {
this.computedChapter(e.content).then((pages) => { this.computedChapter(e.content).then((pages) => {
let arr = []; let arr = [];
let newPages = [];
const pagesSync = e.type == 'prev' ? pages.concat(this.pages) : this.pages.concat(pages); const pagesSync = e.type == 'prev' ? pages.concat(this.pages) : this.pages.concat(pages);
pagesSync.forEach(item => { let newPages = pagesSync.filter(item => (item.type == 'text' || item.type == 'custom' || item.type == 'slot'))
if (arr.indexOf(item.chapter) == -1) arr.push(item.chapter) // pagesSync.forEach(item => {
}) // if (arr.indexOf(item.chapter) == -1) arr.push(item.chapter)
if (arr.length > 3) { // })
let reChapter = e.type == 'prev' ? pagesSync[pagesSync.length - 1].chapter : pagesSync[0].chapter; // if (arr.length > 3) {
newPages = pagesSync.filter(item => item.chapter != reChapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot')); // let reChapter = e.type == 'prev' ? pagesSync[pagesSync.length - 1].chapter : pagesSync[0].chapter;
} else { // newPages = pagesSync.filter(item => item.chapter != reChapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot'));
newPages = pagesSync.filter(item => (item.type == 'text' || item.type == 'custom' || item.type == 'slot')); // } else {
} // newPages = pagesSync.filter(item => (item.type == 'text' || item.type == 'custom' || item.type == 'slot'));
// }
if ( this.options.pageType != 'scroll' ) { if ( this.options.pageType != 'scroll' ) {
const prevIndex = this.contents.findIndex(content => content.chapter == newPages[0].chapter); const prevIndex = this.contents.findIndex(content => content.chapter == newPages[0].chapter);
const nextIndex = this.contents.findIndex(content => content.chapter == newPages[newPages.length - 1].chapter); const nextIndex = this.contents.findIndex(content => content.chapter == newPages[newPages.length - 1].chapter);
newPages.unshift({ if ( !this.firstTipUnable && this.contents[prevIndex].isStart ) {
title: this.contents[prevIndex].title || '', newPages.unshift({
chapter: this.contents[prevIndex].chapter, title: this.contents[prevIndex].title || '',
type: this.contents[prevIndex].isStart ? 'top' : 'prevLoading', chapter: this.contents[prevIndex].chapter,
dataId: newPages[0].dataId - 1, type: 'top',
start: 0, direction: 'prev',
end: 0 dataId: newPages[0].dataId - 1,
}) start: 0,
newPages.push({ end: 0
title: this.contents[nextIndex].title || '', })
chapter: this.contents[nextIndex].chapter, } else {
type: this.contents[nextIndex].isEnd ? 'bottom' : 'nextLoading', newPages.unshift({
dataId: newPages[newPages.length - 1].dataId + 1, title: this.contents[prevIndex].title || '',
start: 0, chapter: this.contents[prevIndex].chapter,
end: 0 type: 'loading',
}) direction: 'prev',
dataId: newPages[0].dataId - 1,
start: 0,
end: 0
})
}
if ( !this.lastTipUnable && this.contents[nextIndex].isEnd ) {
newPages.push({
title: this.contents[nextIndex].title || '',
chapter: this.contents[nextIndex].chapter,
type: 'bottom',
direction: 'next',
dataId: newPages[newPages.length - 1].dataId + 1,
start: 0,
end: 0
})
} else {
newPages.push({
title: this.contents[nextIndex].title || '',
chapter: this.contents[nextIndex].chapter,
type: 'loading',
direction: 'next',
dataId: newPages[newPages.length - 1].dataId + 1,
start: 0,
end: 0
})
}
this.pages = newPages this.pages = newPages
const nowIndex = newPages.findIndex(page => page.dataId == this.currentDataId); const nowIndex = newPages.findIndex(page => page.dataId == this.currentDataId);
if ( nowIndex == -1 ) { if ( nowIndex == -1 ) {
this.currentDataId = e.type == 'next' ? pages[0].dataId : pages[pages.length - 1].dataId; this.currentDataId = e.type == 'next' ? pages[0].dataId : pages[pages.length - 1].dataId;
this.onChange(this.currentDataId) this.handleFlipChange(this.currentDataId)
} else {
this.startAutoplay()
} }
} else { } else {
let dataId = e.type == 'prev' ? this.pages[0].dataId : this.pages[this.pages.length-1].dataId let dataId = e.type == 'prev' ? this.pages[0].dataId : this.pages[this.pages.length-1].dataId
@ -322,7 +433,7 @@ export default {
filterPage (pageInfo) { filterPage (pageInfo) {
if ( pageInfo && pageInfo.dataId > -1 ) { if ( pageInfo && pageInfo.dataId > -1 ) {
const nowChapters = this.pages.filter(item => item.chapter == pageInfo.chapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot')) const nowChapters = this.pages.filter(item => item.chapter == pageInfo.chapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot'))
let currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId) const currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId)
if ( currentPage > -1 ) { if ( currentPage > -1 ) {
return (currentPage + 1) + ' / ' + nowChapters.length return (currentPage + 1) + ' / ' + nowChapters.length
} else { } else {
@ -335,32 +446,6 @@ export default {
filterDate () { filterDate () {
let date = new Date() let date = new Date()
return Util.zeroize(date.getHours()) + ':' + Util.zeroize(date.getMinutes()) return Util.zeroize(date.getHours()) + ':' + Util.zeroize(date.getMinutes())
}, }
//翻往上一页
pagePrev () {
if ( this.options.pageType != 'scroll' ) {
// #ifndef APP-NVUE
this.pagePrevWxs()
// #endif
// #ifdef APP-NVUE
this.pagePrevBinding()
// #endif
} else {
this.scrollPrev()
}
},
//翻往下一页
pageNext () {
if ( this.options.pageType != 'scroll' ) {
// #ifndef APP-NVUE
this.pageNextWxs()
// #endif
// #ifdef APP-NVUE
this.pageNextBinding()
// #endif
} else {
this.scrollNext()
}
},
} }
} }

250
uni_modules/yingbing-ReadPage/components/modules/flip/bindingx.js
View File

@ -1,250 +0,0 @@
const Binding = uni.requireNativePlugin('bindingx')
const animation = uni.requireNativePlugin('animation')
import Util from '../../../js_sdk/util.js'
export default {
data () {
return {
disableTouch: false,
isTouch: false,
flipTouchTime: 0,
interval: false,
direction: ''
}
},
beforeDestroy () {
if ( this.flip_binding ) {
Binding.unbind({
token: this.flip_binding.token,
eventType: 'pan'
})
this.flip_binding = null
}
if ( this.flip_animation_binding ) {
Binding.unbind({
token: this.flip_animation_binding.token,
eventType: 'timing'
})
this.flip_animation_binding = null
}
},
methods: {
//翻往上一页
pagePrevBinding () {
if ( !this.isTouch && !this.disableTouch ) {
this.isTouch = true
this.startX = 0
this.onFilpTouchend()
}
},
//翻往下一页
pageNextBinding () {
if ( !this.isTouch && !this.disableTouch ) {
this.isTouch = true
this.startX = this.viewWidth
this.onFilpTouchend()
}
},
onFilpTouchstart (event) {
if ( this.isTouch || this.disableTouch ) {
return
}
this.isTouch = true
this.flipTouchTime = 0
this.interval = true
this.setInterval()
let touch = event.touches[0]
this.startX = touch.pageX
this.startY = touch.pageY
},
async onFilpTouchmove (event) {
if ( this.isTouch && (this.pageType == 'real' || this.pageType == 'cover') && !this.disableTouch && this.flipTouchTime > 200 ) {
if ( !this.direction ) {
let touch = event.touches[0]
if ( touch.pageX < this.startX ) {
if ( this.nextDataId ) {
this.direction = 'next'
}
} else {
if ( this.prevDataId ) {
this.direction = 'prev'
}
}
}
if ( this.direction ) {
this.disableTouch = true
let currentDataId = this.direction == 'next' ? this.currentDataId : this.prevDataId
let props = [{
element: Util.getEl(this.$refs['flipItem_' + currentDataId][0]),
property: 'transform.translateX',
expression: `${this.direction == 'next' ? ('x > 0 ? 0 : (x < -' + this.viewWidth + ' ? -' + this.viewWidth + ' : x + 0)') : ('x < 0 ? -' + this.viewWidth + ' : (x > ' + this.viewWidth + ' ? 0 : x-' + this.viewWidth + ')')}`
}]
if ( this.pageType == 'real' ) {
props.push({
element: Util.getEl(this.$refs['flipItemWrapper_' + currentDataId][0]),
property: 'transform.translateX',
expression: `${this.direction == 'next' ? ('x > 0 ? 0 : (x < -' + this.viewWidth + ' ? ' + this.viewWidth + ' : 0 - x)') : ('x < 0 ? ' + this.viewWidth + ' : (x > ' + this.viewWidth + ' ? 0 : ' + this.viewWidth + '-x)')}`
})
props.push({
element: Util.getEl(this.$refs['flipItemBg_' + currentDataId][0]),
property: 'transform.translateX',
expression: `${this.direction == 'next' ? ('x > 0 ? 0 : (x < -' + this.viewWidth + ' ? -' + this.viewWidth + ' : x + 0)') : ('x < 0 ? -' + this.viewWidth + ' : (x > ' + this.viewWidth + ' ? 0 : x-' + this.viewWidth + ')')}`
})
let rect = await this.getRect(this.$refs['flipItemBg_' + currentDataId][0])
let height = rect.height / 2;
let maxDeg = height / 5;
props.push({
element: Util.getEl(this.$refs['flipItemBg_' + currentDataId][0]),
property: 'transform.rotateZ',
expression: `${this.direction == 'next' ? 'y/' + maxDeg : '-(y/' + maxDeg + ')'}`
})
props.push({
element: Util.getEl(this.$refs['flipItemShadow_' + currentDataId][0]),
property: 'width',
expression: `${this.direction == 'next' ? 'abs(x) / 2 + 0' : this.viewWidth / 2 + '-abs(x) / 2'}`
})
}
this.flip_binding = Binding.bind({
anchor: Util.getEl(this.$refs.yingbingFlip),
eventType: 'pan',
props: props
}, (e) => {
if ((e.state == 'end' || e.state == 'cancel') && this.flip_binding) {
this.clearInterval()
Binding.unbind({
token: this.flip_binding.token,
eventType: 'pan'
})
this.flip_binding = null
let value = this.direction == 'next' ? 1 : -1;
if (this.flipTouchTime <= 200) {
let duration = (this.pageType == 'real' || this.pageType == 'cover') ? 200 : 1
this.pageAnimation(value, -value * this.viewWidth, duration);
} else {
let duration = (this.pageType == 'real' || this.pageType == 'cover') ? 200 : 1
let deltaX = Binding.getComputedStyle(Util.getEl(this.$refs['flipItem_' + currentDataId][0])).translateX
let late = this.direction == 'next' ? deltaX : this.viewWidth + deltaX
if (Math.abs(late) >= this.viewWidth / 4) {
this.pageAnimation(value, -value * this.viewWidth, duration)
} else {
let value = this.direction == 'next' ? 1 : -1;
this.pageAnimation(value, 0, duration);
}
}
}
})
} else {
this.resetPageBinding()
}
}
},
onFilpTouchend () {
if ( this.isTouch && !this.disableTouch ) {
this.disableTouch = true
this.clearInterval()
if ( this.flipTouchTime <= 200 ) {
if ( !this.direction ) {
if (this.startX > (this.viewWidth / 4) * 3) {
if ( this.nextDataId ) {
this.direction = 'next'
}
}
if (this.startX < (this.viewWidth / 4)) {
if ( this.prevDataId ) {
this.direction = 'prev'
}
}
}
if ( this.direction ) {
let duration = (this.pageType == 'real' || this.pageType == 'cover') ? 200 : 1
let value = this.direction == 'next' ? 1 : -1;
this.pageAnimation(value, -value * this.viewWidth, duration);
} else {
this.resetPageBinding()
}
} else {
this.resetPageBinding()
}
}
},
getRect (el) {
return new Promise(resolve => {
uni.requireNativePlugin('dom').getComponentRect(el, res => {
resolve(res.size)
})
})
},
setInterval () {
this.flipTouchTimer = setTimeout(() => {
this.flipTouchTime += 10
if ( this.interval ) {
this.setInterval()
}
}, 10)
},
clearInterval () {
this.interval = false
if ( this.flipTouchTimer ) {
clearTimeout(this.flipTouchTimer)
this.flipTouchTimer = null
}
},
pageAnimation (value, offset, duration) {
let currentDataId = this.direction == 'next' ? this.currentDataId : this.prevDataId
let late = this.direction == 'next' ? offset : offset - this.viewWidth;
let flipItemTrans = Binding.getComputedStyle(Util.getEl(this.$refs['flipItem_' + currentDataId][0])).translateX
let props = [{
element: Util.getEl(this.$refs['flipItem_' + currentDataId][0]),
property: 'transform.translateX',
expression: `linear(t, ${flipItemTrans}, ${late - flipItemTrans}, ${duration})`
}]
if ( this.pageType == 'real' ) {
let flipItemWrapperTrans = Binding.getComputedStyle(Util.getEl(this.$refs['flipItemWrapper_' + currentDataId][0])).translateX
props.push({
element: Util.getEl(this.$refs['flipItemWrapper_' + currentDataId][0]),
property: 'transform.translateX',
expression: `linear(t, ${flipItemWrapperTrans}, ${-late - flipItemWrapperTrans}, ${duration})`
})
let flipItemBgTrans = Binding.getComputedStyle(Util.getEl(this.$refs['flipItemBg_' + currentDataId][0])).translateX
props.push({
element: Util.getEl(this.$refs['flipItemBg_' + currentDataId][0]),
property: 'transform.translateX',
expression: `linear(t, ${flipItemBgTrans}, ${late - flipItemBgTrans}, ${duration})`
})
let flipItemShadowWidth = this.flipTouchTime <= 200 && this.direction == 'prev' ? this.viewWidth : Binding.getComputedStyle(Util.getEl(this.$refs['flipItemShadow_' + currentDataId][0])).width
props.push({
element: Util.getEl(this.$refs['flipItemShadow_' + currentDataId][0]),
property: 'width',
expression: `linear(t, ${flipItemShadowWidth}, ${-late - flipItemShadowWidth}, ${duration})`
})
}
this.flip_animation_binding = Binding.bind({
eventType: 'timing',
exitExpression: 't>' + duration,
props: props
}, (e) => {
if (e.state == 'exit' && this.flip_animation_binding && e.t > duration) {
Binding.unbind({
token: this.flip_animation_binding.token,
eventType: 'timing'
})
this.flip_animation_binding = null
if ( Math.abs(offset) > 0 ) {
this.onChange(value > 0 ? this.nextDataId : this.prevDataId)
}
this.resetPageBinding();
}
})
},
resetPageBinding () {
this.direction = ''
this.flipTouchTime = 0
this.startX = 0
this.startY = 0
this.$nextTick(function () {
this.isTouch = false
this.disableTouch = false
})
}
}
}

66
uni_modules/yingbing-ReadPage/components/modules/flip/flip.css
View File

@ -5,44 +5,17 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.yingbing-flip {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
}
.flip-item {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
}
.flip-item-wrapper { .flip-item-wrapper {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
box-sizing: border-box;
/* #endif */
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0;
right: 0; right: 0;
/* #ifndef APP-NVUE */ bottom: 0;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
} }
.flip-item-header { .flip-item-header {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@ -55,7 +28,7 @@
overflow: hidden; overflow: hidden;
} }
.flip-item-header-text { .flip-item-header-text {
font-size: 30rpx; font-size: 24rpx;
opacity: .4; opacity: .4;
font-weight: bold; font-weight: bold;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
@ -88,13 +61,13 @@
font-weight: bold; font-weight: bold;
} }
.flip-item-content { .flip-item-content {
flex: 1;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* #endif */ /* #endif */
flex: 1;
} }
.flip-item-text { .flip-item-text {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@ -115,20 +88,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.flip-item-bg { .flip-loading-text {
position: absolute; font-size: 20px;
/* #ifdef APP-NVUE */
box-shadow: 0 20rpx 20rpx rgba(0,0,0,0.2);
/* #endif */
} }
.flip-item-shadow { /* #ifndef APP-NVUE */
position: absolute; view, image, input, scroll-view, swiper, swiper-item, text, textarea, video {
width: 0; position: static;
top: 0; }
bottom: 0; /* #endif */
right: 0;
/* #ifdef APP-NVUE */
background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(0,0,0,.5));
opacity: 0.5;
/* #endif */
}

110
uni_modules/yingbing-ReadPage/components/modules/flip/flip.js
View File

@ -1,33 +1,14 @@
import Util from '../../../js_sdk/util.js' import Util from '../../../js_sdk/util.js'
// #ifdef APP-NVUE
import FlipBindingx from './bindingx.js'
// #endif
export default { export default {
// #ifdef APP-NVUE
mixins: [FlipBindingx],
// #endif
computed: { computed: {
dataReverse () {
let data = JSON.parse(JSON.stringify(this.pages))
return data.reverse()
},
current () { current () {
return this.dataReverse.findIndex(item => item.dataId == this.currentDataId) return this.pages.findIndex(item => item.dataId == this.currentDataId)
}, },
prevDataId () { prevDataId () {
return this.dataReverse[this.current + 1] && this.dataReverse[this.current + 1].dataId return this.pages[this.current - 1] && this.pages[this.current - 1].dataId
}, },
nextDataId () { nextDataId () {
return this.dataReverse[this.current - 1] && this.dataReverse[this.current - 1].dataId return this.pages[this.current + 1] && this.pages[this.current + 1].dataId
},
flipProp () {
return {
prevDataId: this.prevDataId,
nextDataId: this.nextDataId,
currentDataId: this.currentDataId,
pageType: this.options.pageType,
pageTo: this.pageTo
}
} }
}, },
data() { data() {
@ -35,52 +16,27 @@ export default {
currentDataId: -1, currentDataId: -1,
isShow: false, isShow: false,
viewWidth: 0, viewWidth: 0,
viewHeight: 0, moreLoading: false
pageTo: 0,
moreLoading: false,
initLoading: true,
loadingText: '正在加载内容',
loadStatus: 'none',
loadChapter: -1,
loadValue: 0
}
},
mounted () {
if ( this.pageType != 'scroll' ) {
this.$nextTick(function () {
setTimeout(() => {
this.getViewRect()
}, 50)
})
} }
}, },
methods: { methods: {
//翻往上一页 //翻往上一页
pagePrevWxs () { pagePrevFlip () {
this.pageTo = 0 this.$refs.flip.flipToPrev()
this.$nextTick(function(){
this.pageTo = -1
})
}, },
//翻往下一页 //翻往下一页
pageNextWxs () { pageNextFlip () {
this.pageTo = 0 this.$refs.flip.flipToNext()
this.$nextTick(function(){
this.pageTo = 1
})
}, },
reload () { reloadLoadmoreFlip (p) {
if ( this.loadStatus == 'fail' || this.loadStatus == 'timeout' ) { let loadIndex = this.pages.findIndex(page => p.dataId == page.dataId)
this.initLoading = false this.$set(this.pages[loadIndex], 'type', 'loading')
this.loadingText = '正在加载内容' let nextChapter = p.direction == 'next' ? p.chapter + 1 : p.chapter - 1
this.loadStatus = 'none'; this.loadmoreFlip(nextChapter, p.direction == 'next' ? 1 : -1);
this.loadmore(this.loadChapter, this.loadValue);
this.loadChapter = -1;
this.loadValue = 0;
}
}, },
loadmore (chapter, value) { loadmoreFlip (chapter, value) {
this.$emit('loadmore', chapter, (status, content) => { this.$emit('loadmore', chapter, (status, content) => {
this.moreLoading = false;
if (status == 'success') { if (status == 'success') {
const index = this.contents.findIndex(item => item.chapter == content.chapter) const index = this.contents.findIndex(item => item.chapter == content.chapter)
if (index > -1) { if (index > -1) {
@ -93,33 +49,16 @@ export default {
type: value > 0 ? 'next' : 'prev' type: value > 0 ? 'next' : 'prev'
}); });
this.preload(chapter) this.preload(chapter)
this.moreLoading = false;
} else if ( status == 'fail' ) {
this.loadStatus = status;
this.loadingText = '请求失败，点击重试'
this.initLoading = true
this.loadChapter = chapter;
this.loadValue = value;
} else { } else {
this.loadStatus = status; let loadIndex = this.pages.findIndex(page => page.type == 'loading' && page.direction == (value > 0 ? 'next' : 'prev'))
this.loadingText = '请求超时，点击重试' this.$set(this.pages[loadIndex], 'type', status)
this.initLoading = true
this.loadChapter = chapter;
this.loadValue = value;
} }
}) })
}, },
getViewRect () { handleFlipChangeRender (e) {
return new Promise(resolve => { this.handleFlipChange(e.detail.dataId)
Util.getRect('.yingbing-flip', this.$refs.yingbingFlip, this).then(res => {
this.viewWidth = res.width
this.viewHeight = res.height
this.isShow = true
resolve(true)
})
})
}, },
onChange(dataId) { handleFlipChange (dataId) {
const value = dataId < this.currentDataId ? -1 : 1 const value = dataId < this.currentDataId ? -1 : 1
this.currentDataId = dataId this.currentDataId = dataId
const index = this.pages.findIndex(page => page.dataId == dataId); const index = this.pages.findIndex(page => page.dataId == dataId);
@ -130,10 +69,9 @@ export default {
pageInfo.currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId) + 1 pageInfo.currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId) + 1
if ( this.contents[contentIndex].title ) pageInfo.title = this.contents[contentIndex].title if ( this.contents[contentIndex].title ) pageInfo.title = this.contents[contentIndex].title
this.pageInfo = pageInfo this.pageInfo = pageInfo
this.$emit('change', pageInfo, this.pages) this._emitPageInfo(pageInfo, this.pages)
const nextType = this.pages[index + value] && this.pages[index + value].type const nextType = this.pages[index + value] && this.pages[index + value].type
const loadings = ['nextLoading', 'prevLoading'] if ( this.pages[index].type == 'loading' || nextType == 'loading') {
if ( loadings.indexOf(this.pages[index].type) >-1 || loadings.indexOf(nextType) >-1) {
if (this.moreLoading) return if (this.moreLoading) return
this.moreLoading = true; this.moreLoading = true;
const loadChapter = this.pages[index].chapter + value; const loadChapter = this.pages[index].chapter + value;
@ -146,8 +84,10 @@ export default {
this.preload(loadChapter) this.preload(loadChapter)
this.moreLoading = false; this.moreLoading = false;
} else { } else {
this.loadmore(loadChapter, value) this.loadmoreFlip(loadChapter, value)
} }
} else {
this.startAutoplay()
} }
} }
} }

569
uni_modules/yingbing-ReadPage/components/modules/flip/flip.vue
View File

@ -1,569 +0,0 @@
<template>
<view
class="yingbing-flip"
ref="yingbingFlip"
:style="{
'background-color': options.bgColor
}"
:prop="flipProp"
:change:prop="flip.propWatcher"
@touchstart="flip.touchstart"
@touchmove="flip.touchmove"
@touchend="flip.touchend">
<template v-if="isShow">
<view v-if="(item.dataId == currentDataIdSync || item.dataId == prevDataId || item.dataId == nextDataId)"
class="flip-item"
:class="'flip-item_' + item.dataId"
v-for="(item, index) in dataReverse"
:key="item.dataId"
:style="{
'transform': item.dataId < currentDataIdSync ? `translateX(${-viewWidth}px)` : ''
}">
<view
class="flip-item-wrapper"
:class="'flip-item-wrapper_' + item.dataId"
:style="{
'padding-left': options.slide + 'px',
'padding-right': options.slide + 'px',
'padding-top': options.topGap + 'px',
'padding-bottom': options.bottomGap + 'px',
'background': options.bgColor,
'transform': item.dataId < currentDataIdSync ? options.pageType == 'real' ? `translateX(${viewWidth}px)` : 'translateX(0)' : ''
}">
<view class="flip-item-header" v-if="options.headerShow">
<text class="flip-item-header-text" :style="{
color: options.color
}">{{item.title}}</text>
</view>
<template v-if="item.type == 'text'">
<view class="flip-item-text flip-item-content"
>
<text class="flip-text"
v-for="(text, i) in item.text" :key="i"
:style="{
'margin-top': options.lineHeight + 'px',
'height': options.fontSize + 'px',
'font-size': options.fontSize + 'px',
'color': options.color
}">{{text}}</text>
</view>
</template>
<template v-else-if="item.type == 'custom'">
<view class="flip-custom flip-item-content" v-html="item.text">
</view>
</template>
<template v-else-if="item.type == 'slot'">
<view class="flip-slot flip-item-content">
<slot :name="item.text"></slot>
</view>
</template>
<template v-else-if="item.type == 'nextLoading' || item.type == 'prevLoading' ">
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px'
}">正在加载内容</text>
</view>
</template>
<template v-else-if="item.type == 'top' || item.type == 'bottom' ">
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px'
}">{{item.type == 'top' ? '前面已经没有了' : '后面已经没有了'}}</text>
</view>
</template>
<template v-else>
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px'
}">未知类型页面</text>
</view>
</template>
<view class="flip-item-footer" v-if="options.footerShow">
<text class="flip-item-footer-text" :style="{
color: options.color
}">{{filterDate()}}</text>
<text class="flip-item-footer-text" :style="{
color: options.color
}">{{filterPage(item)}}</text>
<battery :color="options.color" style="opacity: 0.5"></battery>
</view>
</view>
<view
class="flip-item-bg"
:class="'flip-item-bg_' + item.dataId"
:style="{
left: viewWidth + 'px',
width: viewWidth + 'px',
height: (viewHeight * 1.5) + 'px',
top: (viewHeight / 2 - (viewHeight * 1.5) / 2) + 'px',
background: options.bgColor,
}"></view>
<view class="flip-item-shadow" :class="'flip-item-shadow_' + item.dataId"></view>
</view>
</template>
</view>
</template>
<script>
import Util from '../../../js_sdk/util.js'
import Battery from '../battery.vue'
export default {
components: {
Battery
},
props: {
currentDataId: {
type: Number,
default: -1
},
data: {
type: Array,
default () {
return new Array
}
},
options: {
type: Object,
default () {
return new Object
}
}
},
computed: {
dataReverse () {
let data = JSON.parse(JSON.stringify(this.data))
data.reverse()
return data
},
prevDataId () {
return this.dataReverse[this.current + 1] && this.dataReverse[this.current + 1].dataId
},
nextDataId () {
return this.dataReverse[this.current - 1] && this.dataReverse[this.current - 1].dataId
},
flipProp () {
return {
current: this.current,
prevDataId: this.prevDataId,
nextDataId: this.nextDataId,
currentDataId: this.currentDataIdSync,
pageType: this.options.pageType,
pageTo: this.pageTo
}
}
},
data () {
return {
isShow: false,
viewWidth: 0,
viewHeight: 0,
currentDataIdSync: -1,
current: -1,
pageTo: 0
}
},
mounted () {
this.currentDataIdSync = this.currentDataId
this.current = this.dataReverse.findIndex(item => item.dataId == this.currentDataIdSync)
this.$nextTick(function () {
setTimeout(() => {
// #ifndef APP-NVUE
const query = uni.createSelectorQuery().in(this);
query.select('.yingbing-flip').boundingClientRect(data => {
this.viewWidth = data.width
this.viewHeight = data.height
this.isShow = true
}).exec();
// #endif
// #ifdef APP-NVUE
uni.requireNativePlugin('dom').getComponentRect(this.$refs.yingbingFlip, res => {
this.viewWidth = res.size.width
this.viewHeight = res.size.height
this.isShow = true
})
// #endif
}, 50)
})
},
methods: {
onChange (e) {
this.current = e.current
this.currentDataIdSync = this.dataReverse[this.current].dataId
this.$emit('change', this.currentDataIdSync)
},
pagePrev () {
this.pageTo = 0
this.$nextTick(function(){
this.pageTo = -1
})
},
pageNext () {
this.pageTo = 0
this.$nextTick(function(){
this.pageTo = 1
})
},
filterPage (pageInfo) {
const nowChapters = this.data.filter(item => item.chapter == pageInfo.chapter && (item.type == 'text' || item.type == 'custom' || item.type == 'slot'))
let currentPage = nowChapters.findIndex(item => item.dataId == pageInfo.dataId)
if ( currentPage > -1 ) {
return (currentPage + 1) + ' / ' + nowChapters.length
} else {
return pageInfo.type == 'top' ? '最前面' : pageInfo.type == 'bottom' ? '最后面' : pageInfo.type.indexOf('Loading') > -1 ? '请等待' : ''
}
},
filterDate () {
let date = new Date()
return Util.zeroize(date.getHours()) + ':' + Util.zeroize(date.getMinutes())
}
},
watch: {
currentDataId (newVal) {
this.currentDataIdSync = newVal
this.current = this.dataReverse.findIndex(item => item.dataId == this.currentDataIdSync)
},
data (newVal) {
this.$nextTick(function () {
this.current = this.dataReverse.findIndex(item => item.dataId == this.currentDataIdSync)
})
}
}
}
</script>
<!-- #ifdef APP-VUE || H5 || MP-QQ || MP-WEIXIN -->
<script lang="wxs" module="flip">
function touchstart (event, ins) {
var state = ins.getState()
if ( state.isTouch || state.disableTouch ) {
return
}
state.isTouch = true
state.touchTime = 0
state.interval = true
setInterval(ins)
var touch = event.touches[0]
state.startX = touch.pageX
state.startY = touch.pageY
}
function touchmove (event, ins) {
event.preventDefault && event.preventDefault()
var state = ins.getState()
if ( state.isTouch && (state.pageType == 'real' || state.pageType == 'cover') && !state.disableTouch ) {
var touch = event.touches[0]
if (state.direction) {
var rect = ins.getBoundingClientRect()
var height = rect.height / 2;
var maxDeg = height / 5;
state.rotate = state.direction == 'next' ? ((touch.pageY - height) / maxDeg) : -((touch.pageY - height) / maxDeg);
state.offset = touch.pageX - state.startX;
if ( (state.offset > 0 && state.direction == 'next') || (state.offset < 0 && state.direction == 'prev') ) {
state.offset = 0
}
if ( Math.abs(state.offset) <= rect.width ) {
animation(state.offset, 0, ins);
}
} else {
if ( touch.pageX < state.startX ) {
if ( state.nextDataId ) {
state.direction = 'next'
}
} else {
if ( state.prevDataId ) {
state.direction = 'prev'
}
}
}
}
}
function touchend (event, ins) {
var state = ins.getState()
clearInterval(ins)
if ( state.isTouch && !state.disableTouch ) {
var rect = ins.getBoundingClientRect()
if ( !state.direction && state.touchTime <= 200 ) {
//获取点击位置，判断向哪里翻页
if (state.startX > (rect.width / 4) * 3) {
if ( state.nextDataId ) {
state.direction = 'next'
}
}
if (state.startX < (rect.width / 4)) {
if ( state.prevDataId ) {
state.direction = 'prev'
}
}
}
if (state.direction) {
state.disableTouch = true
if (state.touchTime <= 200) {
var duration = (state.pageType == 'real' || state.pageType == 'cover') ? 200 : 0
var value = state.direction == 'next' ? 1 : -1;
animation(-value * rect.width, duration, ins);
ins.setTimeout(function () {
reset(-value * rect.width, ins);
state.current -= value
ins.callMethod('onChange', {
current: state.current
})
}, duration)
} else {
var duration = (state.pageType == 'real' || state.pageType == 'cover') ? 100 : 0
if (Math.abs(state.offset) >= rect.width / 4) {
var value = state.direction == 'next' ? 1 : -1;
animation(-value * rect.width, duration, ins);
ins.setTimeout(function () {
reset(-value * rect.width, ins);
state.current -= value
ins.callMethod('onChange', {
current: state.current
})
}, duration)
} else {
animation(0, duration, ins);
ins.setTimeout(function () {
reset(0, ins);
}, duration)
}
}
} else {
reset(0, ins)
}
}
}
function propWatcher (newVal, oldVal, ins) {
ins.setTimeout(function () {
var state = ins.getState()
state.current = newVal.current
state.currentDataId = newVal.currentDataId
state.prevDataId = newVal.prevDataId
state.nextDataId = newVal.nextDataId
state.pageType = newVal.pageType
if (newVal.pageTo != (oldVal && oldVal.pageTo)) {
if ( !state.disableTouch ) {
if ( newVal.pageTo == -1 && state.prevDataId ) {
state.isTouch = true
state.startX = 1
state.touchTime = 0
state.direction = 'prev'
touchend(null, ins)
}
if ( newVal.pageTo == 1 && state.nextDataId ) {
state.isTouch = true
var rect = ins.getBoundingClientRect()
state.startX = rect.width
state.touchTime = 0
state.direction = 'next'
touchend(null, ins)
}
}
}
}, 50)
}
function setInterval (ins) {
var state = ins.getState()
state.touchTimer = ins.setTimeout(function () {
state.touchTime += 10
if ( state.interval ) {
setInterval(ins)
}
}, 10)
}
function clearInterval (ins) {
var state = ins.getState()
state.interval = false
if ( state.touchTimer ) {
ins.clearTimeout(state.touchTimer)
state.touchTimer = null
}
}
function reset (offset, ins) {
var state = ins.getState()
var rect = ins.getBoundingClientRect()
if ( state.direction ) {
var late = state.direction == 'next' ? offset : offset - rect.width;
var currentDataId = state.direction == 'next' ? state.currentDataId : state.prevDataId
if ( currentDataId ) {
ins.selectComponent('.flip-item_' + currentDataId).setStyle({
transform: 'translateX(' + (-late) + 'px)',
'box-shadow': '',
transition: ''
})
if ( state.pageType == 'real' ) {
ins.selectComponent('.flip-item-bg_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px) rotateZ(' + state.rotate + 'deg)',
'box-shadow': '',
transition: ''
})
}
ins.selectComponent('.flip-item-shadow_' + currentDataId).setStyle({
'box-shadow': '',
transition: ''
})
}
}
state.direction = null
state.isTouch = false
state.disableTouch = false
state.offset = 0
state.touchTime = 0
state.startX = 0
state.startY = 0
}
function animation (offset, duration, ins) {
var state = ins.getState()
var rect = ins.getBoundingClientRect()
var late = state.direction == 'next' ? offset : offset - rect.width;
var currentDataId = state.direction == 'next' ? state.currentDataId : state.prevDataId
ins.selectComponent('.flip-item_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px)',
'box-shadow': state.pageType == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.pageType == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
if ( state.pageType == 'real' ) {
ins.selectComponent('.flip-item-wrapper_' + currentDataId).setStyle({
transform: 'translateX(' + (-late) + 'px)',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
ins.selectComponent('.flip-item-bg_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px) rotateZ(' + state.rotate + 'deg)',
'box-shadow': '-5px 0 20px rgba(0,0,0,0.1)',
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
})
ins.selectComponent('.flip-item-shadow_' + currentDataId).setStyle({
'box-shadow': '0 0 60px ' + (Math.abs(late) > 30 ? 30 : Math.abs(late)) + 'px rgba(0,0,0,0.4)',
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
})
} else {
ins.selectComponent('.flip-item-wrapper_' + currentDataId).setStyle({
transform: 'translateX(0px)',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
ins.selectComponent('.flip-item-shadow_' + currentDataId).setStyle({
'box-shadow': '0 0 60px 0 rgba(0,0,0,0.5)',
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
})
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend,
propWatcher: propWatcher
}
</script>
<!-- #endif -->
<style scoped>
.yingbing-flip {
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
position: relative;
}
.flip-item {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
}
.flip-item-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
}
.flip-item-header {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
box-sizing: border-box;
/* #endif */
justify-content: center;
height: 50rpx;
overflow: hidden;
}
.flip-item-header-text {
font-size: 24rpx;
opacity: .4;
font-weight: bold;
}
.flip-item-footer {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
align-items: center;
flex-direction: row;
justify-content: space-between;
height: 50rpx;
overflow: hidden;
}
.flip-item-footer-text {
font-size: 24rpx;
opacity: .4;
font-weight: bold;
}
.flip-item-content {
flex: 1;
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
/* #endif */
}
.flip-item-text {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
},
.flip-text {
/* #ifndef APP-NVUE */
box-sizing: border-box;
white-space: pre-wrap;
font-family: Microsoft YaHei, 微软雅黑;
/* #endif */
}
.flip-loading {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
}
.flip-item-bg {
position: absolute;
}
.flip-item-shadow {
position: absolute;
width: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>

208
uni_modules/yingbing-ReadPage/components/modules/flip/flip.wxs
View File

@ -1,208 +0,0 @@
function touchstart (event, ins) {
var state = ins.getState()
if ( state.isTouch || state.disableTouch ) {
return
}
state.isTouch = true
state.touchTime = 0
state.interval = true
setInterval(ins)
var touch = event.touches[0]
state.startX = touch.pageX
state.startY = touch.pageY
}
function touchmove (event, ins) {
event.preventDefault && event.preventDefault()
var state = ins.getState()
if ( state.isTouch && (state.pageType == 'real' || state.pageType == 'cover') && !state.disableTouch ) {
var touch = event.touches[0]
if (state.direction) {
var rect = ins.getBoundingClientRect()
var height = rect.height / 2;
var maxDeg = height / 5;
state.rotate = state.direction == 'next' ? ((touch.pageY - height) / maxDeg) : -((touch.pageY - height) / maxDeg);
state.offset = touch.pageX - state.startX;
if ( (state.offset > 0 && state.direction == 'next') || (state.offset < 0 && state.direction == 'prev') ) {
state.offset = 0
}
if ( Math.abs(state.offset) <= rect.width ) {
animation(state.offset, 0, ins)
}
} else {
if ( touch.pageX < state.startX ) {
if ( state.nextDataId ) {
state.direction = 'next'
}
} else {
if ( state.prevDataId ) {
state.direction = 'prev'
}
}
}
}
}
function touchend (event, ins) {
var state = ins.getState()
clearInterval(ins)
if ( state.isTouch && !state.disableTouch ) {
var rect = ins.getBoundingClientRect()
if ( !state.direction && state.touchTime <= 200 ) {
//获取点击位置，判断向哪里翻页
if (state.startX > (rect.width / 4) * 3) {
if ( state.nextDataId ) {
state.direction = 'next'
}
}
if (state.startX < (rect.width / 4)) {
if ( state.prevDataId ) {
state.direction = 'prev'
}
}
}
if (state.direction) {
state.disableTouch = true
if (state.touchTime <= 200) {
var duration = (state.pageType == 'real' || state.pageType == 'cover') ? 200 : 0
var value = state.direction == 'next' ? 1 : -1;
animation(-value * rect.width, duration, ins);
ins.setTimeout(function () {
reset(-value * rect.width, ins);
ins.callMethod('onChange', value > 0 ? state.nextDataId : state.prevDataId)
}, duration)
} else {
var duration = (state.pageType == 'real' || state.pageType == 'cover') ? 100 : 0
if (Math.abs(state.offset) >= rect.width / 4) {
var value = state.direction == 'next' ? 1 : -1;
animation(-value * rect.width, duration, ins);
ins.setTimeout(function () {
reset(-value * rect.width, ins);
ins.callMethod('onChange', value > 0 ? state.nextDataId : state.prevDataId)
}, duration)
} else {
animation(0, duration, ins);
ins.setTimeout(function () {
reset(0, ins);
}, duration)
}
}
} else {
reset(0, ins)
}
}
}
function propWatcher (newVal, oldVal, ins) {
if ( oldVal ) {
var state = ins.getState()
state.currentDataId = newVal.currentDataId
state.prevDataId = newVal.prevDataId
state.nextDataId = newVal.nextDataId
state.pageType = newVal.pageType
if (newVal.pageTo != oldVal.pageTo) {
if ( !state.disableTouch ) {
if ( newVal.pageTo == -1 && state.prevDataId ) {
state.isTouch = true
state.startX = 1
state.touchTime = 0
state.direction = 'prev'
touchend(null, ins)
}
if ( newVal.pageTo == 1 && state.nextDataId ) {
state.isTouch = true
var rect = ins.getBoundingClientRect()
state.startX = rect.width
state.touchTime = 0
state.direction = 'next'
touchend(null, ins)
}
}
}
}
}
function setInterval (ins) {
var state = ins.getState()
state.touchTimer = ins.setTimeout(function () {
state.touchTime += 10
if ( state.interval ) {
setInterval(ins)
}
}, 10)
}
function clearInterval (ins) {
var state = ins.getState()
state.interval = false
if ( state.touchTimer ) {
ins.clearTimeout(state.touchTimer)
state.touchTimer = null
}
}
function reset (offset, ins) {
var state = ins.getState()
var rect = ins.getBoundingClientRect()
if ( state.direction ) {
var late = state.direction == 'next' ? offset : offset - rect.width;
var currentDataId = state.direction == 'next' ? state.currentDataId : state.prevDataId
if ( currentDataId ) {
var draw = function () {
ins.selectComponent('.flip-item_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px)',
'box-shadow': '',
transition: ''
})
if ( state.pageType == 'real' ) {
ins.selectComponent('.flip-item-bg_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px) rotateZ(' + state.rotate + 'deg)',
'box-shadow': '',
transition: ''
})
}
ins.selectComponent('.flip-item-shadow_' + currentDataId).setStyle({
'box-shadow': '',
transition: ''
})
}
ins.requestAnimationFrame(draw)
}
}
state.direction = null
state.isTouch = false
state.disableTouch = false
state.offset = 0
state.touchTime = 0
state.startX = 0
state.startY = 0
}
function animation (offset, duration, ins) {
var state = ins.getState()
var rect = ins.getBoundingClientRect()
var late = state.direction == 'next' ? offset : offset - rect.width;
var currentDataId = state.direction == 'next' ? state.currentDataId : state.prevDataId
var draw = function () {
ins.selectComponent('.flip-item_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px)',
'box-shadow': state.pageType == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.pageType == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
if ( state.pageType == 'real' ) {
ins.selectComponent('.flip-item-wrapper_' + currentDataId).setStyle({
transform: 'translateX(' + (-late) + 'px)',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
ins.selectComponent('.flip-item-bg_' + currentDataId).setStyle({
transform: 'translateX(' + late + 'px) rotateZ(' + state.rotate + 'deg)',
'box-shadow': '-5px 0 20px rgba(0,0,0,0.1)',
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
})
ins.selectComponent('.flip-item-shadow_' + currentDataId).setStyle({
'box-shadow': '0 0 60px 30px rgba(0,0,0,0.4)',
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
})
}
}
ins.requestAnimationFrame(draw)
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend,
propWatcher: propWatcher
}

2
uni_modules/yingbing-ReadPage/components/modules/richtext.vue
View File

@ -76,7 +76,7 @@
}) })
}, },
setFontFace () { setFontFace () {
this.$refs.webview.evalJS("setFontFace(" + encodeURIComponent(JSON.stringify(this.fontFace)) + ")") this.$refs.webview && this.$refs.webview.evalJS("setFontFace(" + encodeURIComponent(JSON.stringify(this.fontFace)) + ")")
} }
}, },
watch: { watch: {

18
uni_modules/yingbing-ReadPage/components/modules/scroll/scroll.js
View File

@ -23,7 +23,7 @@ export default {
return return
} }
this.scrolling = true this.scrolling = true
this.$refs.list.scrollTo(this.scrollTop + this.options.fontSize + this.options.lineHeight, true) this.$refs.list.scrollTo(this.scrollTop + (this.windowHeight / 2), true)
this.scrollTimer = setTimeout(() => { this.scrollTimer = setTimeout(() => {
this.scrolling = false this.scrolling = false
clearTimeout(this.scrollTimer) clearTimeout(this.scrollTimer)
@ -35,14 +35,14 @@ export default {
return return
} }
this.scrolling = true this.scrolling = true
this.$refs.list.scrollTo(this.scrollTop - (this.options.fontSize + this.options.lineHeight), true) this.$refs.list.scrollTo(this.scrollTop - (this.windowHeight / 2), true)
this.scrollTimer = setTimeout(() => { this.scrollTimer = setTimeout(() => {
this.scrolling = false this.scrolling = false
clearTimeout(this.scrollTimer) clearTimeout(this.scrollTimer)
this.scrollTimer = null this.scrollTimer = null
}, 300) }, 300)
}, },
onPulldown (callback) { pulldownScroll (callback) {
let contentsIndex = this.contents.findIndex(content => content.chapter == this.pages[0].chapter) let contentsIndex = this.contents.findIndex(content => content.chapter == this.pages[0].chapter)
if ( this.contents[contentsIndex].isStart ) { if ( this.contents[contentsIndex].isStart ) {
callback('end') callback('end')
@ -64,7 +64,8 @@ export default {
this.$refs.list.resetLoadmore() this.$refs.list.resetLoadmore()
} }
}, },
onLoadmore (callback) { loadmoreScroll (callback) {
this.stopAutoplay()
let contentsIndex = this.contents.findIndex(content => content.chapter == this.pages[this.pages.length - 1].chapter) let contentsIndex = this.contents.findIndex(content => content.chapter == this.pages[this.pages.length - 1].chapter)
if ( this.contents[contentsIndex].isEnd ) { if ( this.contents[contentsIndex].isEnd ) {
callback('end') callback('end')
@ -103,12 +104,13 @@ export default {
}); });
this.preload(chapter) this.preload(chapter)
} }
callback && callback('success') callback && callback(status)
}) })
} }
}, },
async scrollEnd(e) { async scrollEnd(e) {
let rate = Math.floor(e.scrollTop / this.viewHeight) const size = await this.getRect()
let rate = Math.floor(e.scrollTop / size.height)
let maybe = this.pages[rate] ? rate : this.pages.length-1 let maybe = this.pages[rate] ? rate : this.pages.length-1
let top = -1 let top = -1
let pageInfo = null let pageInfo = null
@ -127,7 +129,8 @@ export default {
//刷新当前时间和设备电量 //刷新当前时间和设备电量
this.scrollDate = this.filterDate() this.scrollDate = this.filterDate()
this.$refs.scrollBattery.getBattery() this.$refs.scrollBattery.getBattery()
this.$emit('change', pageInfo, this.pages) this._emitPageInfo(pageInfo, this.pages)
this.startAutoplay()
} }
}, },
getScrollItemRect (dataId) { getScrollItemRect (dataId) {
@ -138,6 +141,7 @@ export default {
}) })
}, },
onScroll (e) { onScroll (e) {
this.stopAutoplay()
if ( this.options.pageType == 'scroll' ) { if ( this.options.pageType == 'scroll' ) {
this.scrollTop = e.scrollTop this.scrollTop = e.scrollTop
if ( this.scrollTimer ) { if ( this.scrollTimer ) {

537
uni_modules/yingbing-ReadPage/components/yingbing-ReadPage/yingbing-ReadPage.vue
View File

@ -1,152 +1,124 @@
<template> <template>
<view class="yingbing-read-page" ref="yingbingReadPage" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"> <view class="yingbing-read-page" ref="yingbingReadPage" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<!-- <computed ref="computedPage" :options="options"></computed> --> <view class="computed">
<text class="computed-text computed-text-chinese" ref="computedTextChinese" :style="{
'font-family': fontFamily
}">中</text>
<text class="computed-text computed-text-space" ref="computedTextSpace" :style="{
'font-family': fontFamily
}">s</text>
<text class="computed-text computed-text-lower" ref="computedTextLower" :style="{
'font-family': fontFamily
}">a</text>
<text class="computed-text computed-text-upper" ref="computedTextUpper" :style="{
'font-family': fontFamily
}">A</text>
<text class="computed-text computed-text-number" ref="computedTextNumber" :style="{
'font-family': fontFamily
}">9</text>
<text class="computed-text computed-text-special" ref="computedTextSpecial" :style="{
'font-family': fontFamily
}">&</text>
</view>
<!-- 翻页模式 --> <!-- 翻页模式 -->
<view class="yingbing-read-page-flip" :style="{ <view class="yingbing-read-page-flip" :style="{
'visibility': pageType != 'scroll' ? 'visible' : 'hidden' 'visibility': pageType != 'scroll' ? 'visible' : 'hidden'
}"> }">
<template v-if="pageType != 'scroll'"> <yingbing-flip ref="flip" class="yingbing-read-page-flip" :data="pages" :current="current" :bgColor="bgColor" :duration="300" :unableClickPage="unableClickPage" :type="pageType" @change="handleFlipChangeRender">
<!-- #ifndef APP-NVUE --> <!-- #ifdef MP -->
<view <template v-for="(item, index) in pages" :slot="index">
class="yingbing-flip"
ref="yingbingFlip"
:style="{
'background': options.bgColor
}"
:prop="flipProp"
:change:prop="flip.propWatcher"
@touchstart="flip.touchstart"
@touchmove="flip.touchmove"
@touchend="flip.touchend">
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifndef MP -->
<view <template v-slot="{item, index}">
class="yingbing-flip"
ref="yingbingFlip"
:style="{
'background': options.bgColor
}"
@touchstart="onFilpTouchstart"
@touchmove="onFilpTouchmove"
@touchend="onFilpTouchend">
<!-- #endif --> <!-- #endif -->
<template v-if="isShow"> <view class="flip-item-wrapper" :style="{
<view 'padding-left': slide + 'px',
class="flip-item" 'padding-right': slide + 'px',
v-for="(item, index) in dataReverse" 'padding-top': topGap + 'px',
:key="item.dataId + '_flip'" 'padding-bottom': bottomGap + 'px'
:style="{ }">
'visibility': item.dataId == currentDataId || item.dataId == prevDataId || item.dataId == nextDataId ? 'visible' : 'hidden' <view class="flip-item-header" v-if="headerShow">
}"> <text class="flip-item-header-text" :style="{
<view color: color,
v-if="item.dataId == currentDataId || item.dataId == prevDataId || item.dataId == nextDataId" 'font-family': fontFamily
class="flip-item" }">{{item.title}}</text>
:ref="'flipItem_' + item.dataId"
:class="'flip-item_' + item.dataId"
:style="{
'transform': item.dataId < currentDataId ? `translateX(${-viewWidth}px)` : '',
}">
<view
class="flip-item-wrapper"
:ref="'flipItemWrapper_' + item.dataId"
:class="'flip-item-wrapper_' + item.dataId"
:style="{
'padding-left': options.slide + 'px',
'padding-right': options.slide + 'px',
'padding-top': options.topGap + 'px',
'padding-bottom': options.bottomGap + 'px',
'background': options.bgColor,
'transform': item.dataId < currentDataId ? options.pageType == 'real' ? `translateX(${viewWidth}px)` : 'translateX(0)' : ''
}">
<view class="flip-item-header" v-if="options.headerShow">
<text class="flip-item-header-text" :style="{
color: options.color,
'font-family': options.fontFamily
}">{{item.title}}</text>
</view>
<template v-if="item.type == 'text'">
<view class="flip-item-text flip-item-content"
>
<text class="flip-text"
v-for="(text, i) in item.text" :key="i"
:style="{
'margin-top': options.lineHeight + 'px',
'height': options.fontSize + 'px',
'font-size': options.fontSize + 'px',
'color': options.color,
'font-family': options.fontFamily
}">{{text}}</text>
</view>
</template>
<template v-else-if="item.type == 'custom'">
<read-rich-text style="flex: 1;" :richtext="item.text" :fontFace="fontFace" :pageType="pageType" @customClick="customClick"></read-rich-text>
</template>
<template v-else-if="item.type == 'slot'">
<view class="flip-slot flip-item-content">
<slot :name="item.text"></slot>
</view>
</template>
<template v-else-if="item.type == 'nextLoading' || item.type == 'prevLoading' ">
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px',
'font-family': options.fontFamily
}">正在加载内容</text>
</view>
</template>
<template v-else-if="item.type == 'top' || item.type == 'bottom' ">
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px',
'font-family': options.fontFamily
}">{{item.type == 'top' ? '前面已经没有了' : '后面已经没有了'}}</text>
</view>
</template>
<template v-else>
<view class="flip-loading flip-item-content">
<text :style="{
'color': options.color,
'font-size': options.fontSize + 'px',
'font-family': options.fontFamily
}">未知类型页面</text>
</view>
</template>
<view class="flip-item-footer" v-if="options.footerShow">
<!-- <text class="flip-item-footer-text" :style="{
color: options.color,
'font-family': options.fontFamily
}">{{filterDate()}}</text> -->
<text class="flip-item-footer-text" :style="{
color: options.color,
'font-family': options.fontFamily
}">{{filterPage(item)}}</text>
<!-- <battery :color="options.color" style="opacity: 0.5"></battery> -->
</view>
</view>
<view
class="flip-item-bg"
:ref="'flipItemBg_' + item.dataId"
:class="'flip-item-bg_' + item.dataId"
:style="{
left: viewWidth + 'px',
width: viewWidth + 'px',
height: (viewHeight * 1.5) + 'px',
transform: item.dataId < currentDataId && options.pageType == 'real' ? 'translateX(' + viewWidth + 'px)' : '',
top: (viewHeight / 2 - (viewHeight * 1.5) / 2) + 'px',
background: options.bgColor,
}"></view>
<view
class="flip-item-shadow"
:ref="'flipItemShadow_' + item.dataId"
:class="'flip-item-shadow_' + item.dataId">
</view>
</view>
</view> </view>
</template> <template v-if="item.type == 'text'">
</view> <view class="flip-item-text flip-item-content"
</template> >
<text class="flip-text"
v-for="(text, i) in item.text" :key="i"
:style="{
'margin-top': options.lineHeight + 'px',
'height': options.fontSize + 'px',
'font-size': options.fontSize + 'px',
'color': options.color,
'font-family': options.fontFamily,
'line-height': options.fontSize + 'px'
}">{{text}}</text>
</view>
</template>
<template v-if="item.type == 'custom'">
<read-rich-text style="flex: 1;" :richtext="item.text" :fontFace="fontFace" :pageType="pageType" @customClick="customClick"></read-rich-text>
</template>
<template v-if="item.type == 'slot'">
<view class="flip-slot flip-item-content">
<!-- #ifndef MP-WEIXIN -->
<slot :name="item.text" :prop="item"></slot>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<slot :name="item.text"></slot>
<!-- #endif -->
</view>
</template>
<template v-if="item.type == 'loading'">
<view class="flip-loading flip-item-content">
<text class="flip-loading-text" :style="{
'color': options.color,
'font-family': options.fontFamily
}">正在加载内容</text>
</view>
</template>
<template v-if="item.type == 'fail' || item.type == 'timeout' ">
<view class="flip-loading flip-item-content">
<text class="flip-loading-text" @tap="reloadLoadmoreFlip(item)" :style="{
'color': options.color,
'font-family': options.fontFamily
}">{{item.type == 'timeout' ? '加载超时' : '加载失败'}},点击刷新</text>
</view>
</template>
<template v-if="item.type == 'top' || item.type == 'bottom' ">
<view class="flip-loading flip-item-content">
<slot :name="item.type">
<text class="flip-loading-text" :style="{
'color': options.color,
'font-family': options.fontFamily
}">{{item.type == 'top' ? firstTip : lastTip}}</text>
</slot>
</view>
</template>
<!-- <template v-else>
<view class="flip-loading flip-item-content">
<text class="flip-loading-text" :style="{
'color': options.color,
'font-family': options.fontFamily
}">未知类型页面</text>
</view>
</template> -->
<view class="flip-item-footer" v-if="footerShow">
<text class="flip-item-footer-text" :style="{
color: color,
'font-family': fontFamily
}">{{filterDate()}}</text>
<text class="flip-item-footer-text" :style="{
color: color,
'font-family': fontFamily
}">{{filterPage(item)}}</text>
<battery :color="color" style="opacity: 0.5"></battery>
</view>
</view>
</template>
</yingbing-flip>
</view> </view>
<!-- 翻页模式 --> <!-- 翻页模式 -->
@ -171,16 +143,16 @@
<scroll-list <scroll-list
ref="list" ref="list"
@scroll="onScroll" @scroll="onScroll"
:pulldown="{show: true, color: options.color, endText: '已经到最前面了'}" :pulldown="{show: true, color: options.color, defaultText: '下拉获取上一章节', endText: firstTip, failText: '获取上一章节失败'}"
:loadmore="{show: true, color: options.color, endText: '已经到最后面了'}" :loadmore="{show: true, color: options.color, defaultText: '上拉获取上一章节', endText: lastTip, failText: '获取下一章节失败'}"
@pulldown="onPulldown" @pulldown="pulldownScroll"
@loadmore="onLoadmore" @loadmore="loadmoreScroll"
@scrolltoupper="scrolltoupper"> @scrolltoupper="scrolltoupper">
<view class="scroll-item-wrapper" ref="scrollItemWrapper"> <view class="scroll-item-wrapper" ref="scrollItemWrapper">
<view <view
:id="'scroll-item_' + item.dataId" :id="'scroll-item_' + item.dataId"
v-for="(item, index) in pages" v-for="(item, index) in pages"
:key="item.dataId + '_scroll'" :key="item.dataId"
class="scroll-item" class="scroll-item"
:ref="'scrollItem_' + item.dataId" :ref="'scrollItem_' + item.dataId"
:style="{ :style="{
@ -197,7 +169,8 @@
'height': options.fontSize + 'px', 'height': options.fontSize + 'px',
'font-size': options.fontSize + 'px', 'font-size': options.fontSize + 'px',
'color': options.color, 'color': options.color,
'font-family': options.fontFamily 'font-family': options.fontFamily,
'line-height': options.fontSize + 'px'
}">{{text}}</text> }">{{text}}</text>
</view> </view>
</template> </template>
@ -248,8 +221,13 @@
</view> --> </view> -->
</template> </template>
</view> </view>
<view class="yingbing-loading" v-if="initLoading" :style="{background: options.bgColor}" @tap="reload"> <view class="yingbing-loading" v-if="loadstatus" :style="{background: options.bgColor}" @tap="_reload">
<list-loading :size="40":visible="initLoading" :color="options.color" :text="loadingText"></list-loading> <text class="error-text" :style="{
color: options.color
}">{{loadstatus == 'fail' ? '加载失败' : '加载超时'}},点击刷新</text>
</view>
<view class="yingbing-loading" v-if="initLoading" :style="{background: options.bgColor}">
<list-loading :size="40" :visible="initLoading" :color="options.color" text="正在加载中"></list-loading>
</view> </view>
</view> </view>
</template> </template>
@ -275,6 +253,16 @@
ListLoading ListLoading
}, },
props: { props: {
//自动翻页/滚动
autoplay: {
type: Boolean,
default: false
},
//自动翻页/滚动周期
autoplayTime: {
type: [String, Number],
default: 5000
},
//字体颜色 //字体颜色
color: { color: {
type: String, type: String,
@ -297,11 +285,34 @@
return new Array return new Array
} }
}, },
firstTip: {
type: String,
default: '前面已经没有了'
},
lastTip: {
type: String,
default: '后面已经没有了'
},
//关闭第一页提示
firstTipUnable: {
type: Boolean,
default: false
},
//关闭最后一页提示
lastTipUnable: {
type: Boolean,
default: false
},
//背景颜色 //背景颜色
bgColor: { bgColor: {
type: String, type: String,
default: '#fcd281' default: '#fcd281'
}, },
//是否关闭点击左右2侧位置翻页
unableClickPage: {
type: Boolean,
default: false
},
//翻页方式 //翻页方式
pageType: { pageType: {
type: String, type: String,
@ -352,6 +363,11 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
//分隔符
split: {
type: String,
default: ''
},
//点击事件位置设置 //点击事件位置设置
clickOption: { clickOption: {
type: Object, type: Object,
@ -363,7 +379,7 @@
top: 'auto' top: 'auto'
} }
} }
}, }
}, },
data () { data () {
return { return {
@ -379,7 +395,11 @@
touchmoveY: 0, touchmoveY: 0,
touchTime: 0, touchTime: 0,
windowWidth: 0, windowWidth: 0,
windowHeight: 0 windowHeight: 0,
initLoading: true,
loadstatus: '',
loadchapter: -1,
loadstart: -1
} }
}, },
computed: { computed: {
@ -388,6 +408,7 @@
}, },
options () { options () {
return { return {
unableClickPage: this.unableClickPage,
pageType: this.pageType, pageType: this.pageType,
color: this.color, color: this.color,
bgColor: this.bgColor, bgColor: this.bgColor,
@ -405,10 +426,8 @@
} }
}, },
beforeDestroy () { beforeDestroy () {
if ( this.refreshTimer ) { this.clearRefreshTimer()
clearTimeout(this.refreshTimer) this.stopAutoplay()
this.refreshTimer = null
}
}, },
mounted () { mounted () {
this.$nextTick(function () { this.$nextTick(function () {
@ -423,6 +442,7 @@
}, },
methods: { methods: {
touchstart (e) { touchstart (e) {
this.stopAutoplay()
if ( !this.enableClick ) { if ( !this.enableClick ) {
return return
} }
@ -449,6 +469,7 @@
this.touchmoveY = touch.pageY; this.touchmoveY = touch.pageY;
}, },
touchend (e) { touchend (e) {
this.startAutoplay()
if ( this.touchInter ) { if ( this.touchInter ) {
clearTimeout(this.touchInter); clearTimeout(this.touchInter);
this.touchInter = null this.touchInter = null
@ -501,11 +522,9 @@
this.$emit('setCatalog', e); this.$emit('setCatalog', e);
}, },
//初始化 //初始化
init (data) { async init (data) {
if ( this.refreshTimer ) { this.clearRefreshTimer()
clearTimeout(this.refreshTimer) await this.getComputedTextSize()
this.refreshTimer = null
}
if ( !this.noChapter ) { if ( !this.noChapter ) {
this.contents = data.contents; this.contents = data.contents;
this.initLoading = true; this.initLoading = true;
@ -519,21 +538,57 @@
}, },
//重计算 //重计算
refresh () { refresh () {
if ( this.refreshTimer ) { this.stopAutoplay()
clearTimeout(this.refreshTimer) this.clearRefreshTimer()
this.refreshTimer = null if ( this.isRefreshing ) {
this.refreshTimer = setTimeout(() => {
this.refresh()
}, 100)
return
} }
this.isRefreshing = true
this.resetPage({ this.resetPage({
start: this.pageInfo.start, start: this.pageInfo.start,
currentChapter: this.pageInfo.chapter currentChapter: this.pageInfo.chapter
}) })
}, },
_emitPageInfo (pageInfo, pages) {
this.isRefreshing = false
this.$emit('change', pageInfo, pages)
},
_reload () {
this.initLoading = true
if ( this.loadchapter > -1 ) {
this.$emit('loadmore', parseInt(this.loadchapter), (status, content) => {
this.initLoading = false
if (status == 'success') {
this._resetReload()
const index = this.contents.findIndex(item => item.chapter == content.chapter)
if (index > -1) {
this.contents[index] = content
} else {
this.contents.push(content)
}
this.resetPage({
start: this.loadstart || 0,
currentChapter: this.loadchapter
})
} else {
this.loadstatus = status
}
})
}
},
_resetReload () {
this.loadstatus = '';
this.loadchapter = -1;
this.loadstart = -1;
},
//跳转 //跳转
change (data) { change (data) {
if ( this.refreshTimer ) { this.stopAutoplay()
clearTimeout(this.refreshTimer) this.clearRefreshTimer()
this.refreshTimer = null this._resetReload()
}
if ( data.contents && data.contents.length > 0 ) { if ( data.contents && data.contents.length > 0 ) {
data.contents.forEach(item => { data.contents.forEach(item => {
let index = this.contents.findIndex(content => content.chapter == item.chapter) let index = this.contents.findIndex(content => content.chapter == item.chapter)
@ -552,10 +607,71 @@
currentChapter: parseInt(data.currentChapter || 1) currentChapter: parseInt(data.currentChapter || 1)
}) })
} else { } else {
uni.showToast({ if ( this.noChapter ) {
title: '未找到该章节内容', uni.showToast({
icon: 'none' title: '未找到该章节',
}) icon: 'none'
})
} else {
this.initLoading = true;
this.$emit('loadmore', parseInt(data.currentChapter), (status, content) => {
this.initLoading = false
if (status == 'success') {
const index = this.contents.findIndex(item => item.chapter == content.chapter)
if (index > -1) {
this.contents[index] = content
} else {
this.contents.push(content)
}
this.resetPage({
start: parseInt(data.start || 0),
currentChapter: parseInt(data.currentChapter || 1)
})
} else {
this.loadstatus = status;
this.loadstart = parseInt(data.start || 0)
this.loadchapter = parseInt(data.currentChapter || 1);
}
})
}
}
},
//翻往上一页
pagePrev () {
this.stopAutoplay()
if ( this.options.pageType != 'scroll' ) {
this.pagePrevFlip()
} else {
this.scrollPrev()
}
},
//翻往下一页
pageNext () {
this.stopAutoplay()
if ( this.options.pageType != 'scroll' ) {
this.pageNextFlip()
} else {
this.scrollNext()
}
},
startAutoplay () {
if ( this.autoplay && this.pages.length > 0 && this.pages.findIndex(page => page.dataId == this.currentDataId) < this.pages.length - 1 ) {
this.stopAutoplay()
this.autoplayTimer = setTimeout(() => {
this.pageNext()
}, this.autoplayTime)
}
},
stopAutoplay () {
if ( this.autoplayTimer ) {
clearTimeout(this.autoplayTimer)
this.autoplayTimer = null
}
},
clearRefreshTimer () {
if ( this.refreshTimer ) {
clearTimeout(this.refreshTimer)
this.refreshTimer = null
} }
}, },
initFont () { initFont () {
@ -576,84 +692,58 @@
}) })
// #endif // #endif
}) })
}, }
}, },
watch: { watch: {
pageType (newVal, oldVal) { pageType (newVal, oldVal) {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
if ( newVal != 'scroll' ) {
this.getViewRect().then(res => {
this.refresh()
})
} else {
this.refresh()
}
}, 100)
}) })
}, },
fontSize () { fontSize () {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
this.refresh()
}, 100)
}) })
}, },
lineHeight () { lineHeight () {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
this.refresh()
}, 100)
}) })
}, },
slide () { slide () {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
this.refresh()
}, 100)
}) })
}, },
topGap () { topGap () {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
this.refresh()
}, 100)
}) })
}, },
bottomGap () { bottomGap () {
this.$nextTick(function () { this.$nextTick(function () {
if ( this.refreshTimer ) { this.refresh()
clearTimeout(this.refreshTimer) })
this.refreshTimer = null },
} firstTipUnable () {
this.refreshTimer = setTimeout(() => { this.$nextTick(function () {
this.refresh() this.refresh()
}, 100) })
},
lastTipUnable () {
this.$nextTick(function () {
this.refresh()
})
},
fontFamily () {
this.$nextTick(async function () {
await this.getComputedTextSize()
this.refresh()
}) })
}, },
fontFace () { fontFace () {
this.initFont() this.initFont()
}, }
} }
} }
</script> </script>
@ -680,11 +770,9 @@
} }
</script> </script>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-VUE || H5 || MP-QQ || MP-WEIXIN -->
<script lang="wxs" module="flip" src="../modules/flip/flip.wxs"></script>
<!-- #endif -->
<style scoped> <style scoped>
@import url(../modules/computed/computed.css);
@import url(../modules/flip/flip.css); @import url(../modules/flip/flip.css);
@import url(../modules/scroll/scroll.css); @import url(../modules/scroll/scroll.css);
.yingbing-read-page { .yingbing-read-page {
@ -712,6 +800,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.yingbing-loading .error-text {
font-size: 20px;
}
.yingbing-slot { .yingbing-slot {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;

6
uni_modules/yingbing-ReadPage/package.json
View File

@ -1,8 +1,8 @@
{ {
"id": "yingbing-ReadPage", "id": "yingbing-ReadPage",
"displayName": "小说阅读分页插件", "displayName": "好用阅读分页插件",
"version": "1.4.3", "version": "1.5.9",
"description": "给小说分页的插件，包含翻页", "description": "给小说分页的插件",
"keywords": [ "keywords": [
"小说", "小说",
"阅读", "阅读",

160
uni_modules/yingbing-ReadPage/readme.md
View File

File diff suppressed because one or more lines are too long

10
uni_modules/yingbing-flip/changelog.md Normal file
View File

@ -0,0 +1,10 @@
## 1.0.4（2023-09-02）
* 解决插槽中有scroll-view等滚动组件时滑动报错的问题
## 1.0.3（2023-08-23）
* 解决APP-NVUE端resetLoading不生效的问题
## 1.0.2（2023-07-25）
* 解决竖直翻页时，点击上下2侧翻页不准确得问题
## 1.0.1（2023-07-24）
* 解决APP-NVUE无法点击左右2侧翻页得问题
## 1.0.0（2023-07-22）
* 第一次更新

367
uni_modules/yingbing-flip/components/modules/flip.wxs Normal file
View File

@ -0,0 +1,367 @@
function touchstart (event, ins) {
var state = ins.getState()
if ( state.isTouch || state.disableTouch ) {
return
}
state.isTouch = true
state.touchTime = 0
state.interval = true
setInterval(ins)
var touch = event.touches[0]
state.startX = touch.pageX
state.startY = touch.pageY
}
function touchmove (event, ins) {
var state = ins.getState()
if ( state.isTouch && !state.disableTouch ) {
var touch = event.touches[0]
state.offset = state.vertical ? touch.pageY - state.startY : touch.pageX - state.startX;
if (state.direction) {
var rect = ins.getBoundingClientRect()
var size = state.vertical ? rect.height : rect.width
state.offset = state.direction == 'next' ? state.offset + state.sliderFault : state.offset - state.sliderFault
if ( (state.offset > 0 && state.direction == 'next') || (state.offset < 0 && state.direction == 'prev') ) {
state.offset = 0
}
if ( Math.abs(state.offset) <= size ) {
animation(state.offset, 0, ins)
}
} else {
if ( Math.abs(state.offset) < state.sliderFault ) {
return
}
if ( state.offset < 0 ) {
if ( state.nextIndex < state.count && state.nextIndex != 0 ) {
if ( state.type != 'none' ) {state.direction = 'next'}
} else if ( state.pullupable && state.loadingState != 'loading' && state.loadingState != 'success' && state.loadingState != 'fail' ) {
state.loadingType = 'pullup'
state.offset = state.offset + state.sliderFault
pulling(state.offset, ins)
}
} else {
if ( state.prevIndex >= 0 && state.prevIndex != state.count - 1 ) {
if ( state.type != 'none' ) {state.direction = 'prev'}
} else if ( state.pulldownable && state.loadingState != 'loading' && state.loadingState != 'success' && state.loadingState != 'fail' ) {
state.loadingType = 'pulldown'
state.offset = state.offset - state.sliderFault
pulling(state.offset, ins)
}
}
}
}
}
function touchend (event, ins) {
touchaction(event, ins)
}
function touchcancel (event, ins) {
touchaction(event, ins)
}
function touchaction (event, ins,isFlipTo) {
var state = ins.getState()
clearInterval(ins)
if ( state.isTouch && !state.disableTouch ) {
var rect = ins.getBoundingClientRect()
var size = state.vertical ? rect.height : rect.width
var start = state.vertical ? state.startY : state.startX
if ( !state.direction && state.touchTime <= 200 && (!state.unableClickPage || state.type == 'none') && !isFlipTo ) {
//获取点击位置，判断向哪里翻页
if (start > (size / 4) * 3 && state.nextIndex < state.count && state.nextIndex != 0 ) {
state.direction = 'next'
}
if (start < (size / 4) && state.prevIndex >= 0 && state.prevIndex != state.count - 1 ) {
state.direction = 'prev'
}
}
if (state.direction) {
state.disableTouch = true
if (state.touchTime <= 200) {
var duration = state.type == 'none' ? 0 : state.duration;
var value = state.direction == 'next' ? 1 : -1;
animation(-value * size, duration, ins);
ins.setTimeout(function () {
resetShadow(ins, true)
ins.callMethod('handleFlipChange', value);
}, duration + 50)
} else {
var duration = state.type == 'none' ? 0 : state.duration;
if (Math.abs(state.offset) >= size / 4) {
var value = state.direction == 'next' ? 1 : -1;
animation(-value * size, duration, ins);
ins.setTimeout(function () {
resetShadow(ins, true)
ins.callMethod('handleFlipChange', value);
}, duration + 50)
} else {
animation(0, duration, ins);
ins.setTimeout(function () {
resetShadow(ins)
resetFlip(ins);
}, duration + 50)
}
}
} else if ( state.loadingState == 'default' ) {
resetPulling(ins)
} else if ( state.loadingState == 'ready' ) {
pullingRefresh(ins)
} else {
resetShadow(ins, false)
resetFlip(ins)
}
}
}
function propWatcher (newVal, oldVal, ins) {
ins.setTimeout(function () {
var state = ins.getState()
state.vertical = newVal.vertical
state.pulldownable = newVal.pulldownable
state.pullupable = newVal.pullupable
state.pulldownHeight = newVal.pulldownHeight
state.loadingState = newVal.loadingState
state.pullupHeight = newVal.pullupHeight
state.duration = newVal.duration
state.nextIndex = newVal.nextIndex
state.prevIndex = newVal.prevIndex
state.currentIndex = newVal.currentIndex
state.sliderFault = newVal.sliderFault
state.count = newVal.count
state.type = newVal.type
state.unableClickPage = newVal.unableClickPage
state.translate = newVal.translate
if ( oldVal && newVal.currentIndex != oldVal.currentIndex ) {
resetFlip(ins);
}
if ( oldVal && newVal.loadingState != oldVal.loadingState && state.loadingState ) {
resetPulling(ins)
ins.callMethod('resetLoading')
}
if (oldVal && newVal.flipTo != oldVal.flipTo && newVal.flipTo != 0 ) {
if ( !state.disableTouch ) {
if ( newVal.flipTo < 0 && state.prevIndex >= 0 && (state.prevIndex != state.count - 1) ) {
state.isTouch = true
state.touchTime = 0
state.direction = 'prev'
touchaction(null, ins, true)
}
if ( newVal.flipTo > 0 && state.nextIndex < state.count && state.nextIndex != 0 ) {
state.isTouch = true
state.touchTime = 0
state.direction = 'next'
touchaction(null, ins, true)
}
}
}
}, 100)
}
function setInterval (ins) {
var state = ins.getState()
state.touchTimer = ins.setTimeout(function () {
state.touchTime += 10
if ( state.interval ) {
setInterval(ins)
}
}, 10)
}
function clearInterval (ins) {
var state = ins.getState()
state.interval = false
if ( state.touchTimer ) {
ins.clearTimeout(state.touchTimer)
state.touchTimer = null
}
}
function resetShadow (ins, isChange) {
var state = ins.getState()
var direction = state.direction
if ( !direction ) {
return
}
var index = direction == 'next' ? state.currentIndex : state.prevIndex
var translate = state.translate
var rect = ins.getBoundingClientRect()
var size = state.vertical ? rect.height : rect.width;
var draw = function () {
ins.selectComponent('.yingbing-flip-item_' + index).setStyle({
'box-shadow': '',
transform: translate + '(' + (isChange ? (direction == 'next'? -size : 0) : (direction == 'next'? 0 : -size)) + 'px)',
transition: ''
})
if ( state.type == 'real' ) {
ins.selectComponent('.yingbing-flip-item-bg_' + index).setStyle({
'box-shadow': '',
transform: translate + '(' + (isChange ? (direction == 'next' ? 0 : size) : (direction == 'next' ? size : 0)) + 'px)',
transition: ''
})
}
ins.selectComponent('.yingbing-flip-item-shadow_' + index).setStyle({
'box-shadow': '',
transition: ''
})
}
ins.requestAnimationFrame(draw)
}
function resetFlip (ins) {
var state = ins.getState()
state.direction = null
state.isTouch = false
state.disableTouch = false
state.offset = 0
state.touchTime = 0
state.startX = 0
state.startY = 0
}
function animation (offset, duration, ins, noshadow) {
var state = ins.getState()
var rect = ins.getBoundingClientRect()
var size = state.vertical ? rect.height : rect.width
var translate = state.translate
var late = offset
var draw = function () {
if ( state.direction == 'prev' ) {
if ( state.prevIndex >= 0 ) {
ins.selectComponent('.yingbing-flip-item_' + state.prevIndex).setStyle({
transform: translate + '(' + (late - size) + 'px)',
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
if ( state.type == 'real' ) {
ins.selectComponent('.yingbing-flip-item-content_' + state.prevIndex).setStyle({
transform: translate + '(' + (size-late) + 'px)',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
ins.selectComponent('.yingbing-flip-item-bg_' + state.prevIndex).setStyle({
transform: translate + '(' + (late) + 'px)',
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
})
ins.selectComponent('.yingbing-flip-item-shadow_' + state.prevIndex).setStyle({
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
})
}
}
} else {
if ( state.nextIndex < state.count ) {
ins.selectComponent('.yingbing-flip-item_' + state.nextIndex).setStyle({
transform: translate + '(0)',
transition: ''
})
}
ins.selectComponent('.yingbing-flip-item_' + state.currentIndex).setStyle({
transform: translate + '(' + late + 'px)',
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
if ( state.type == 'real' ) {
ins.selectComponent('.yingbing-flip-item-content_' + state.currentIndex).setStyle({
transform: translate + '(' + (-late) + 'px)',
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
})
ins.selectComponent('.yingbing-flip-item-bg_' + state.currentIndex).setStyle({
transform: translate + '(' + (late + size) + 'px)',
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
})
ins.selectComponent('.yingbing-flip-item-shadow_' + state.currentIndex).setStyle({
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
})
}
}
}
ins.requestAnimationFrame(draw)
}
function pulling (offset, ins) {
var state = ins.getState()
var loadingType = state.loadingType
var translate = state.translate
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
var late = offset
if ( Math.abs(state.offset) < size ) {
state.loadingState = 'default'
} else {
state.loadingState = 'ready'
}
var draw = function () {
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
for ( var i = 0; i < pullingItems.length; i++ ) {
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState) ) {
pullingItems[i].setStyle({
visibility: 'visible'
})
} else {
pullingItems[i].setStyle({
visibility: 'hidden'
})
}
}
if ( Math.abs(late) <= size ) {
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
transform: translate + '(' + (loadingType == 'pullup' ? late + size : late - size) + 'px)',
transition: ''
})
}
}
ins.requestAnimationFrame(draw)
}
function resetPulling (ins) {
var state = ins.getState()
var loadingType = state.loadingType
var translate = state.translate
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
var draw = function () {
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
for ( var i = 0; i < pullingItems.length; i++ ) {
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState) ) {
pullingItems[i].setStyle({
visibility: 'visible'
})
} else {
pullingItems[i].setStyle({
visibility: 'hidden'
})
}
}
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
transform: translate + '(' + (loadingType == 'pullup' ? size : -size) + 'px)',
transition: 'transform .3s'
})
}
ins.requestAnimationFrame(draw)
if ( state.loadingState ) {
ins.setTimeout( function () {
state.loadingState = ''
resetPulling(ins)
}, 300)
} else {
state.loadingType = ''
resetFlip(ins)
}
}
function pullingRefresh (ins) {
var state = ins.getState()
state.loadingState = 'loading'
var loadingType = state.loadingType
var draw = function () {
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
for ( var i = 0; i < pullingItems.length; i++ ) {
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-loading') ) {
pullingItems[i].setStyle({
visibility: 'visible'
})
} else {
pullingItems[i].setStyle({
visibility: 'hidden'
})
}
}
}
ins.requestAnimationFrame(draw)
ins.callMethod('pullingRefresh', state.loadingType)
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend,
touchcancel: touchcancel,
propWatcher: propWatcher
}

546
uni_modules/yingbing-flip/components/modules/flip_bindingx.js Normal file
View File

@ -0,0 +1,546 @@
const Binding = uni.requireNativePlugin('bindingx')
const animation = uni.requireNativePlugin('animation')
const dom = uni.requireNativePlugin('dom')
import Util from '../../js_sdk/util.js'
export default {
data () {
return {
disableTouch: false,
isTouch: false,
touchTime: 0,
interval: false,
loadingType: '',
direction: ''
}
},
beforeDestroy () {
if ( this.flipBinding ) {
Binding.unbind({
token: this.flipBinding.token,
eventType: 'pan'
})
this.sliderBinding = null
}
this.resetFlipAnimationBinding()
},
methods: {
fliptouchstart (event) {
if ( this.isTouch || this.disableTouch ) {
return
}
this.isTouch = true
this.touchTime = 0
this.interval = true
this.setInterval()
let touch = event.touches[0]
this.startX = touch.pageX
this.startY = touch.pageY
},
fliptouchmove (event) {
if ( this.isTouch && !this.disableTouch ) {
let touch = event.touches[0]
let offset = this.vertical ? touch.pageY - this.startY : touch.pageX - this.startX
if ( !this.direction ) {
if ( Math.abs(offset) < this.sliderFault ) return
if ( offset < 0 ) {
if ( this.nextIndex < this.count && this.nextIndex != 0 ) {
if ( this.type != 'none' ) {this.direction = 'next'}
} else if ( this.pullupable && this.loadingState != 'loading' && this.loadingState != 'success' && this.loadingState != 'fail' ) {
this.loadingType = 'pullup'
this.disableTouch = true
this.clearInterval()
this.pulling()
}
} else {
if ( this.prevIndex > -1 && this.prevIndex != this.count - 1 ) {
if ( this.type != 'none' ) {this.direction = 'prev'}
} else if ( this.pulldownable && this.loadingState != 'loading' && this.loadingState != 'success' && this.loadingState != 'fail' ) {
this.loadingType = 'pulldown'
this.disableTouch = true
this.clearInterval()
this.pulling()
}
}
}
if ( this.direction ) {
this.disableTouch = true
this.flipTouchAction()
} else {
this.resetPageBinding()
}
}
},
async fliptouchend (e) {
if ( this.isTouch && !this.disableTouch ) {
let rect = await this.getRect(this.$refs.yingbingFlip)
let size = this.vertical ? rect.height : rect.width
this.clearInterval()
let start = this.vertical ? this.startY : this.startX
if ( this.touchTime <= 200 && (!this.unableClickPage || this.type == 'none') ) {
if (start > (size / 4) * 3 && this.nextIndex < this.count && this.nextIndex != 0 ) {
this.flipToNextBindingX()
} else if (start < (size / 4) && this.prevIndex >= 0 && this.prevIndex != this.count - 1 ) {
this.flipToPrevBindingX()
} else {
this.resetPageBinding()
}
} else {
this.resetPageBinding()
}
}
},
async flipTouchAction () {
let props = []
let rect = await this.getRect(this.$refs.yingbingFlip)
let size = this.vertical ? rect.height : rect.width
let translate = this.translate
let shadowProperty = this.vertical ? 'height' : 'width'
let key = this.vertical ? 'y' : 'x'
if ( this.direction == 'prev' ) {
if ( this.prevIndex > -1 ) {
props.push({
element: this.getEl('yingbingFlipItem_' + this.prevIndex),
property: 'transform.' + translate,
expression: `${key} < 0 ? ${-size} : (${key} > ${size} ? 0 : ${key}-${size})`
})
if ( this.type == 'real' ) {
props.push({
element: this.getEl('yingbingFlipItemContent_' + this.prevIndex),
property: 'transform.' + translate,
expression: `${key} < 0 ? ${size} : (${key} > ${size} ? 0 : ${size}-${key})`
})
props.push({
element: this.getEl('yingbingFlipItemBg_' + this.prevIndex),
property: 'transform.' + translate,
expression: `${key} < 0 ? 0 : (${key} > ${size} ? ${size} : ${key} + 0)`
})
props.push({
element: this.getEl('yingbingFlipItemShadow_' + this.prevIndex),
property: shadowProperty,
expression: `${size} / 2 - abs(${key}) / 2'`
})
}
}
} else {
if ( this.nextIndex < this.count ) {
props.push({
element: this.getEl('yingbingFlipItem_' + this.nextIndex),
property: 'transform.' + translate,
expression: '0+0'
})
}
props.push({
element: this.getEl('yingbingFlipItem_' + this.currentIndex),
property: 'transform.' + translate,
expression: `${key} > 0 ? 0 : (${key} < ${-size} ? ${-size} : ${key} + 0)`
})
if ( this.type == 'real' ) {
props.push({
element: this.getEl('yingbingFlipItemContent_' + this.currentIndex),
property: 'transform.' + translate,
expression: `${key} > 0 ? 0 : (${key} < ${-size} ? ${size} : 0 - ${key})'`
})
props.push({
element: this.getEl('yingbingFlipItemBg_' + this.currentIndex),
property: 'transform.' + translate,
expression: `${key} > 0 ? ${size} : (${key} < ${-size} ? 0 : ${key}+${size})`
})
props.push({
element: this.getEl('yingbingFlipItemShadow_' + this.currentIndex),
property: shadowProperty,
expression: `abs(${key})/2+0`
})
}
}
this.flipBinding = Binding.bind({
anchor: this.getEl('yingbingFlip'),
eventType: 'pan',
props: props
}, (e) => {
if ((e.state == 'end' || e.state == 'cancel') && this.flipBinding) {
this.clearInterval()
Binding.unbind({
token: this.flipBinding.token,
eventType: 'pan'
})
this.flipBinding = null
let value = this.direction == 'next' ? 1 : -1;
if (this.touchTime <= 200) {
this.pageAnimation(-value * size, size);
} else {
let index = this.direction == 'next' ? this.currentIndex : this.prevIndex
let deltaX = Binding.getComputedStyle(this.getEl('yingbingFlipItem_' + index))[translate]
let offset = this.direction == 'next' ? Math.abs(deltaX) : size - Math.abs(deltaX)
if ( offset >= size / 4) {
this.pageAnimation(-value * size, size)
} else {
this.pageAnimation(0, size);
}
}
}
})
},
flipToNextBindingX () {
if ( !this.disableTouch && this.nextIndex < this.count && (this.nextIndex != 0 || this.circular) ) {
this.direction = 'next'
this.flipToBindingX()
}
},
flipToPrevBindingX () {
if ( !this.disableTouch && this.prevIndex >= 0 && (this.prevIndex != this.count - 1 || this.circular) ) {
this.direction = 'prev'
this.flipToBindingX()
}
},
async flipToBindingX () {
this.disableTouch = true
let value = this.direction == 'next' ? 1 : -1;
let rect = await this.getRect(this.$refs.yingbingFlip)
let size = this.vertical ? rect.height : rect.width
this.pageAnimation(-value * size, size)
},
getRect (el) {
return new Promise(resolve => {
dom.getComponentRect(el, res => {
resolve(res.size)
})
})
},
setInterval () {
this.touchTimer = setTimeout(() => {
this.touchTime += 10
if ( this.interval ) {
this.setInterval()
}
}, 10)
},
clearInterval () {
this.interval = false
if ( this.touchTimer ) {
clearTimeout(this.touchTimer)
this.touchTimer = null
}
},
pageAnimation (offset, size) {
let duration = this.type == 'none' ? 0.1 : this.duration
let late = offset
let translate = this.translate
let shadowProperty = this.vertical ? 'height' : 'width'
let props = []
if ( this.direction == 'prev' ) {
if ( this.prevIndex > -1 ) {
let itemTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItem_' + this.prevIndex))[translate]
props.push({
element: this.getEl('yingbingFlipItem_' + this.prevIndex),
property: 'transform.' + translate,
expression: `linear(t, ${itemTrans}, ${late - size - itemTrans}, ${duration})`
})
if ( this.type == 'real' ) {
let contentTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItemContent_' + this.prevIndex))[translate]
props.push({
element: this.getEl('yingbingFlipItemContent_' + this.prevIndex),
property: 'transform.' + translate,
expression: `linear(t, ${contentTrans}, ${-(late - size) - contentTrans}, ${duration})`
})
let bgTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItemBg_' + this.prevIndex))[translate]
props.push({
element: this.getEl('yingbingFlipItemBg_' + this.prevIndex),
property: 'transform.' + translate,
expression: `linear(t, ${bgTrans}, ${late - bgTrans}, ${duration})`
})
let shadowSize = Binding.getComputedStyle(this.getEl('yingbingFlipItemShadow_' + this.prevIndex))[shadowProperty] || size
props.push({
element: this.getEl('yingbingFlipItemShadow_' + this.prevIndex),
property: shadowProperty,
expression: `linear(t, ${shadowSize}, ${-(late - size) - shadowSize}, ${duration})`
})
}
this.flipAnimationBinding = Binding.bind({
eventType: 'timing',
exitExpression: 't>' + duration,
props: props
}, (e) => {
if (e.state == 'exit' && this.flipAnimationBinding && e.t > duration) {
Binding.unbind({
token: this.flipAnimationBinding.token,
eventType: 'timing'
})
this.flipAnimationBinding = null
if ( Math.abs(offset) > 0 ) {
this.handleFlipChange(this.direction == 'next' ? 1 : -1)
this.$nextTick(function () {
this.resetPageBinding()
})
} else {
this.resetPageBinding();
}
}
})
}
} else {
if ( this.nextIndex < this.count ) {
animation.transition(this.getRef('yingbingFlipItem_' + this.nextIndex), {
styles: {
transform: `${translate}(0)`
},
duration: 0,
timingFunction: 'linear',
needLayout: true
})
}
animation.transition(this.getRef('yingbingFlipItem_' + this.currentIndex), {
styles: {
transform: `${translate}(${late}px)`
},
duration: duration,
timingFunction: 'linear',
needLayout: true
}, () => {
if ( Math.abs(offset) > 0 ) {
this.handleFlipChange(this.direction == 'next' ? 1 : -1)
this.$nextTick(function () {
this.resetPageBinding()
})
} else {
this.resetPageBinding();
}
})
if ( this.type == 'real' ) {
animation.transition(this.getRef('yingbingFlipItemContent_' + this.currentIndex), {
styles: {
transform: `${translate}(${-late}px)`
},
duration: duration,
timingFunction: 'linear',
needLayout: true
})
animation.transition(this.getRef('yingbingFlipItemBg_' + this.currentIndex), {
styles: {
transform: `${translate}(${size + late}px)`
},
duration: duration,
timingFunction: 'linear',
needLayout: true
})
let styles = {}
styles[shadowProperty] = -late + 'px'
animation.transition(this.getRef('yingbingFlipItemShadow_' + this.currentIndex), {
styles: styles,
duration: duration,
timingFunction: 'linear',
needLayout: true
})
}
// if ( this.nextIndex < this.count ) {
// props.push({
// element: this.getEl('yingbingFlipItem_' + this.nextIndex),
// property: 'transform.' + translate,
// expression: '0+0'
// })
// }
// let itemTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItem_' + this.currentIndex))[translate]
// props.push({
// element: this.getEl('yingbingFlipItem_' + this.currentIndex),
// property: 'transform.' + translate,
// expression: `linear(t, ${itemTrans}, ${late - itemTrans}, ${duration})`
// })
// if ( this.type == 'real' ) {
// let contentTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItemContent_' + this.currentIndex))[translate]
// props.push({
// element: this.getEl('yingbingFlipItemContent_' + this.currentIndex),
// property: 'transform.' + translate,
// expression: `linear(t, ${contentTrans}, ${-late - contentTrans}, ${duration})`
// })
// let bgTrans = Binding.getComputedStyle(this.getEl('yingbingFlipItemBg_' + this.currentIndex))[translate]
// props.push({
// element: this.getEl('yingbingFlipItemBg_' + this.currentIndex),
// property: 'transform.' + translate,
// expression: `linear(t, ${bgTrans}, ${size + late - bgTrans}, ${duration})`
// })
// let shadowSize = Binding.getComputedStyle(this.getEl('yingbingFlipItemShadow_' + this.currentIndex))[shadowProperty]
// props.push({
// element: this.getEl('yingbingFlipItemShadow_' + this.currentIndex),
// property: shadowProperty,
// expression: `linear(t, ${shadowSize}, ${-late - shadowSize}, ${duration})`
// })
// }
}
},
pulling () {
let loadingType = this.loadingType
let size = loadingType == 'pullup' ? this.pullupHeight : this.pulldownHeight
let key = this.vertical ? 'y' : 'x'
let translate = this.translate
let props = [
{
element: this.getEl('yingbing_flip_' + loadingType),
property: 'transform.' + translate,
expression: loadingType == 'pullup' ? `abs(${key}) > ${size} ? 0 : ${key} + ${size}` : `abs(${key}) > ${size} ? 0 : ${key} - ${size}`
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_default'),
property: 'opacity',
expression: `abs(${key}) < ${size} ? 1 : 0`
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_ready'),
property: 'opacity',
expression: `abs(${key}) < ${size} ? 0 : 1`
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_loading'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_success'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_fail'),
property: 'opacity',
expression: '0+0'
}
]
this.flipBinding = Binding.bind({
anchor: this.getEl('yingbingFlip'),
eventType: 'pan',
props: props
}, (e) => {
if ((e.state == 'end' || e.state == 'cancel') && this.flipBinding) {
Binding.unbind({
token: this.flipBinding.token,
eventType: 'pan'
})
this.flipBinding = null
let deltaX = Binding.getComputedStyle(this.getEl('yingbing_flip_' + loadingType))[translate]
if ( deltaX == 0 ) {
this.loadingState = 'ready'
this.pullingRefreshBindingx()
} else {
this.loadingState = 'default'
this.resetPullingBindingx()
}
}
})
},
resetPullingBindingx () {
let loadingType = this.loadingType
let translate = this.translate
let size = loadingType == 'pullup' ? this.pullupHeight : this.pulldownHeight
let trans = loadingType == 'pullup' ? size : -size
let deltaX = Binding.getComputedStyle(this.getEl('yingbing_flip_' + loadingType))[translate]
let duration = 300
let props = [
{
element: this.getEl('yingbing_flip_' + loadingType),
property: 'transform.' + translate,
expression: `linear(t, ${deltaX}, ${trans}, ${duration})`
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_default'),
property: 'opacity',
expression: this.loadingState == 'default' ? '1+0' : '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_ready'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_loading'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_success'),
property: 'opacity',
expression: this.loadingState == 'success' ? '1+0' : '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_fail'),
property: 'opacity',
expression: this.loadingState == 'fail' ? '1+0' : '0+0'
}
]
this.flipAnimationBinding = Binding.bind({
eventType: 'timing',
exitExpression: 't>' + duration,
props: props
}, (e) => {
if (e.state == 'exit' && this.flipAnimationBinding && e.t > duration) {
this.resetFlipAnimationBinding()
this.loadingState = ''
this.resetPageBinding()
}
})
},
pullingRefreshBindingx () {
let loadingType = this.loadingType
let duration = 1
let props = [
{
element: this.getEl('yingbing_flip_' + loadingType + '_default'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_ready'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_loading'),
property: 'opacity',
expression: '1+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_success'),
property: 'opacity',
expression: '0+0'
},
{
element: this.getEl('yingbing_flip_' + loadingType + '_fail'),
property: 'opacity',
expression: '0+0'
}
]
this.flipAnimationBinding = Binding.bind({
eventType: 'timing',
exitExpression: 't>' + duration,
props: props
}, (e) => {
if (e.state == 'exit' && this.flipAnimationBinding && e.t > duration) {
this.resetFlipAnimationBinding()
this.pullingRefresh(loadingType)
}
})
},
resetFlipAnimationBinding () {
if ( this.flipAnimationBinding ) {
Binding.unbind({
token: this.flipAnimationBinding.token,
eventType: 'timing'
})
this.flipAnimationBinding = null
}
},
getEl (selector) {
return this.$refs[selector] ? Util.getEl(this.$refs[selector].length > 0 ? this.$refs[selector][0] : this.$refs[selector]) : null
},
getRef (selector) {
return this.$refs[selector] ? this.$refs[selector].length > 0 ? this.$refs[selector][0] : this.$refs[selector] : null
},
resetPageBinding () {
this.direction = ''
this.touchTime = 0
this.startX = 0
this.startY = 0
this.$nextTick(function () {
this.isTouch = false
this.disableTouch = false
})
}
}
}

420
uni_modules/yingbing-flip/components/yingbing-flip/yingbing-flip.vue Normal file
View File

@ -0,0 +1,420 @@
<template>
<!-- #ifndef APP-NVUE -->
<view
class="yingbing-flip"
:prop="flipProp"
:change:prop="flip.propWatcher"
@touchstart="flip.touchstart"
@touchmove="flip.touchmove"
@touchend="flip.touchend"
@touchcancel="flip.touchcancel"
:style="{
background: bgColor
}">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view
class="yingbing-flip"
ref="yingbingFlip"
@touchstart="fliptouchstart"
@touchmove="fliptouchmove"
@touchend="fliptouchend"
:style="{
background: bgColor
}">
<!-- #endif -->
<view
class="yingbing-flip-item"
:class="'yingbing-flip-item_' + item"
v-for="(item, index) in dataSync"
:ref="'yingbingFlipItem_' + item"
:style="{
'background': bgColor,
'transform': item > currentIndex ? translate + '(' + fullSize + ')' : item < currentIndex ? translate + '(-' + fullSize + ')' : '',
'box-shadow': vertical ? '0 0 15rpx rgba(0,0,0,.2)' : ''
}"
:key="item">
<view
class="yingbing-flip-item-content"
:ref="'yingbingFlipItemContent_' + item"
:class="'yingbing-flip-item-content_' + item"
:style="{
'background': bgColor,
'transform': item < currentIndex ? type == 'real' ? translate + '(' + fullSize + ')' : translate + '(0)' : translate + '(0)'
}">
<!-- #ifdef MP -->
<slot v-if="item > -1 && item < count" :name="item"></slot>
<!-- #endif -->
<!-- #ifndef MP -->
<slot v-if="item > -1 && item < count" :item="data[item]" :index="item"></slot>
<!-- #endif -->
</view>
<view
class="yingbing-flip-item-bg"
:ref="'yingbingFlipItemBg_' + item"
:class="'yingbing-flip-item-bg_' + item"
:style="{
background: bgColor,
transform: item < currentIndex && type == 'real' ? translate + '(0)' : translate + '(' + fullSize + ')',
}"></view>
<view
class="yingbing-flip-item-shadow"
:ref="'yingbingFlipItemShadow_' + item"
:class="'yingbing-flip-item-shadow_' + item"
:style="[shadowStyle]"></view>
</view>
<view class="yingbing-flip-pulldown"
:style="[pulldownStyle]" v-if="pulldownable" ref="yingbing_flip_pulldown">
<view class="yingbing-flip-pulldown-item yingbing-flip-pulldown-default" ref="yingbing_flip_pulldown_default">
<slot name="pulldownDefault"></slot>
</view>
<view class="yingbing-flip-pulldown-item yingbing-flip-pulldown-ready" ref="yingbing_flip_pulldown_ready">
<slot name="pulldownReady"></slot>
</view>
<view class="yingbing-flip-pulldown-item yingbing-flip-pulldown-loading" ref="yingbing_flip_pulldown_loading">
<slot name="pulldownLoading"></slot>
</view>
<view class="yingbing-flip-pulldown-item yingbing-flip-pulldown-success" ref="yingbing_flip_pulldown_success">
<slot name="pulldownSuccess"></slot>
</view>
<view class="yingbing-flip-pulldown-item yingbing-flip-pulldown-fail" ref="yingbing_flip_pulldown_fail">
<slot name="pulldownFail"></slot>
</view>
</view>
<view class="yingbing-flip-pullup"
:style="[pullupStyle]" v-if="pullupable" ref="yingbing_flip_pullup">
<view class="yingbing-flip-pullup-item yingbing-flip-pullup-default" ref="yingbing_flip_pullup_default">
<slot name="pullupDefault"></slot>
</view>
<view class="yingbing-flip-pullup-item yingbing-flip-pullup-ready" ref="yingbing_flip_pullup_ready">
<slot name="pullupReady"></slot>
</view>
<view class="yingbing-flip-pullup-item yingbing-flip-pullup-loading" ref="yingbing_flip_pullup_loading">
<slot name="pullupLoading"></slot>
</view>
<view class="yingbing-flip-pullup-item yingbing-flip-pullup-success" ref="yingbing_flip_pullup_success">
<slot name="pullupSuccess"></slot>
</view>
<view class="yingbing-flip-pullup-item yingbing-flip-pullup-fail" ref="yingbing_flip_pullup_fail">
<slot name="pullupFail"></slot>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
import flipBindingx from '../modules/flip_bindingx.js'
// #endif
export default {
// #ifdef APP-NVUE
mixins: [flipBindingx],
// #endif
props: {
data: {
type: Array,
default () {
return new Array
}
},
vertical: {
type: Boolean,
default: false
},
current: {
type: Number,
default: 0
},
//翻页方式
type: {
type: String,
default: 'real'
},
//滑动周期
duration: {
type: Number,
default: 100
},
//容错距离
sliderFault: {
type: Number,
default: 20
},
//背景颜色
bgColor: {
type: String,
default: '#fcd281'
},
//是否关闭点击左右2侧位置翻页
unableClickPage: {
type: Boolean,
default: false
},
//开启下拉刷新
pulldownable: {
type: Boolean,
default: false
},
//下拉刷新高度
pulldownHeight: {
type: Number,
default: 80
},
//开启上拉加载
pullupable: {
type: Boolean,
default: false
},
//上拉加载高度
pullupHeight: {
type: Number,
default: 80
}
},
computed: {
dataSync () {
let arr = []
if ( this.prevIndex >= 0 ) {
arr.push(this.prevIndex)
}
arr.push(this.currentIndex)
if ( this.nextIndex < this.count ) {
arr.push(this.nextIndex)
}
return this.refreshing ? [] : arr.sort((a, b) => b-a)
},
nextIndex () {
return this.currentIndex + 1 > this.count - 1 && this.count > 2 ? 0 : this.currentIndex + 1
},
prevIndex () {
return this.currentIndex - 1 < 0 && this.count > 2 ? this.count - 1 : this.currentIndex - 1
},
count () {
return this.data.length
},
flipProp () {
return {
vertical: this.vertical,
pulldownable: this.pulldownable,
pullupable: this.pullupable,
pulldownHeight: this.pulldownHeight,
pullupHeight: this.pullupHeight,
loadingState: this.loadingState,
duration: this.duration,
unableClickPage: this.unableClickPage,
nextIndex: this.nextIndex,
prevIndex: this.prevIndex,
currentIndex: this.currentIndex,
type: this.type,
count: this.count,
flipTo: this.flipTo,
sliderFault: this.sliderFault,
translate: this.translate
}
},
pulldownStyle () {
return this.vertical ? {
left: 0,
right: 0,
top: 0,
height: this.pulldownHeight + 'px',
transform: this.translate + '(-' + this.pulldownHeight + 'px)'
} : {
left: 0,
top: 0,
bottom: 0,
width: this.pulldownHeight + 'px',
transform: this.translate + '(-' + this.pulldownHeight + 'px)'
}
},
pullupStyle () {
return this.vertical ? {
left: 0,
right: 0,
bottom: 0,
height: this.pullupHeight + 'px',
transform: this.translate + '(' + this.pullupHeight + 'px)'
} : {
right: 0,
top: 0,
bottom: 0,
width: this.pullupHeight + 'px',
transform: this.translate + '(' + this.pullupHeight + 'px)'
}
},
shadowStyle () {
return this.vertical ? {
bottom: 0,
right: 0,
left: 0,
height: 0,
// #ifdef APP-NVUE
'background-image': 'linear-gradient(to bottom, rgba(255,255,255, 0), rgba(0,0,0,.5))'
// #endif
} : {
top: 0,
bottom: 0,
right: 0,
width: 0,
// #ifdef APP-NVUE
'background-image': 'linear-gradient(to right, rgba(255,255,255, 0), rgba(0,0,0,.5))'
// #endif
}
},
translate () {
return this.vertical ? 'translateY' : 'translateX'
},
fullSize () {
return this.vertical ? '3050rpx' : '750rpx'
}
},
data () {
return {
refreshing: false,
currentIndex: 0,
flipTo: 0,
loadingState: '',
}
},
created() {
this.currentIndex = this.current
},
methods: {
handleFlipChange (value) {
if ( value > 0 ) {
this.currentIndex = this.currentIndex + value > this.count - 1 ? 0 : this.currentIndex + value
} else {
this.currentIndex = this.currentIndex + value < 0 ? this.count - 1 : this.currentIndex + value
}
this.$emit('change', {
current: this.currentIndex,
detail: this.data[this.currentIndex]
})
this.$emit('update:current', this.currentIndex)
},
pullingRefresh (type) {
this.$emit(type, (state) => {
this.loadingState = state
// #ifdef APP-NVUE
this.resetPullingBindingx()
// #endif
})
},
flipToNext () {
// #ifdef APP-NVUE
this.flipToNextBindingX()
// #endif
// #ifndef APP-NVUE
this.flipTo = 0
this.$nextTick(function () {
this.flipTo = 1
})
// #endif
},
flipToPrev () {
// #ifdef APP-NVUE
this.flipToPrevBindingX()
// #endif
// #ifndef APP-NVUE
this.flipTo = 0
this.$nextTick(function () {
this.flipTo = -1
})
// #endif
},
refresh () {
this.refreshing = true
this.$nextTick(function () {
this.currentIndex = this.current
this.refreshing = false
})
},
resetLoading () {
this.loadingState = ''
// #ifdef APP-NVUE
this.resetPullingBindingx()
// #endif
}
},
watch: {
current (newVal) {
this.currentIndex = newVal
}
}
}
</script>
<!-- #ifdef APP-VUE || H5 || MP-QQ || MP-WEIXIN -->
<script lang="wxs" module="flip" src="../modules/flip.wxs"></script>
<!-- #endif -->
<style>
.yingbing-flip {
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
overflow: hidden;
position: relative;
}
.yingbing-flip-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
overflow: hidden;
/* #endif */
}
.yingbing-flip-item-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.yingbing-flip-item-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* #ifdef APP-NVUE */
box-shadow: 0 0 20rpx rgba(0,0,0,0.2);
/* #endif */
}
.yingbing-flip-item-shadow {
position: absolute;
/* #ifdef APP-NVUE */
opacity: 0.5;
/* #endif */
}
.yingbing-flip-pulldown, .yingbing-flip-pullup {
position: absolute;
}
.yingbing-flip-pulldown-item, .yingbing-flip-pullup-item {
/* #ifndef APP-NVUE */
visibility: hidden;
/* #endif */
/* #ifdef APP-NVUE */
opacity: 0;
/* #endif */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* #ifdef MP */
/deep/ .scoped-ref {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
yingbing-flip {
display: block;
}
/* #endif */
</style>

446
uni_modules/yingbing-flip/js_sdk/util.js Normal file
View File

@ -0,0 +1,446 @@
export default {
/**
* 补零
* @param {Number} val 数字
**/
zeroize (val) {
return zeroize(val);
},
/**
* 时间格式化
* @param {String} time 时间戳or时间
**/
dateFormat (time, formats = 'yyyy-mm-dd hh:mm:ss') {
let arr = formats.split(' ')
let dateFormats = ''
let timeFormats = ''
arr.forEach(item => {
if ( item.indexOf('yy') > -1 ) {
dateFormats = item
} else {
timeFormats = item
}
})
const d = new Date(time);
let result = ''
if ( dateFormats.indexOf('yyyy') > -1 ) {
result += d.getFullYear() + '-'
}
if ( dateFormats.indexOf('mm') > -1 ) {
result += zeroize(d.getMonth() + 1) + '-'
}
if ( dateFormats.indexOf('dd') > -1 ) {
result += zeroize(d.getDate()) + ' '
}
if ( timeFormats.indexOf('hh') > -1 ) {
result += zeroize(d.getHours()) + ':'
}
if ( timeFormats.indexOf('mm') > -1 ) {
result += zeroize(d.getMinutes()) + ':'
}
if ( timeFormats.indexOf('ss') > -1 ) {
result += zeroize(d.getSeconds()) + ':'
}
return result.substring(0, result.length - 1)
},
/**
* 秒数转化为分秒
* @param {String} value 秒数
**/
minutesFormat (value) {
let minutes = Math.floor(value / 60 % 60) >= 10 ? Math.floor(value / 60 % 60) : '0' + Math.floor(value / 60 % 60);
let seconds = Math.floor(value % 60) >= 10 ? Math.floor(value % 60) : '0' + Math.floor(value % 60);
return minutes + ':' + seconds;
},
/**
* 时间转化为秒数
* @param {String} time 时间（HH:mm:ss）
**/
time2seconds (time){
const seconds = parseInt(time.split(':')[0]) * 60 + parseInt(time.split(':')[1].split('.')[0]) + parseInt(time.split(':')[1].split('.')[1]) / 1000;
return seconds;
},
/**
* 移除url地址域名
* @param {String} str http地址
**/
removeUrl (url) {
let str = url.replace(/^http:\/\/[^/]+/, '');
return str.substr(1);
},
/**
* 获取文件后缀
* @param {String} name 带后缀的文件名称
**/
suffix (name) {
//获取图片后缀
let fileName = name.lastIndexOf(".");
let fileNameLength = name.length;
let fileFormat = name.substring(fileName + 1, fileNameLength);
return fileFormat;
},
/**
* 清除文件后缀
* @param {String} name 带后缀的文件名称
*/
removeSuffix (name) {
//获取图片后缀
let fileName = name.lastIndexOf(".");
if ( fileName > -1 ) {
let fileNameFormat = name.substring(0, fileName);
return fileNameFormat;
} else {
return name
}
},
/**
* 数组查找符合条件元素并返回下标
* @param {Array} arr 传入数组
* @param {String} value 条件元素
* @param {String} query 对比key值
*/
indexOf (arr, query, value) {
let len = arr.length;
for ( let i = 0; i < len; i++ ) {
if ( arr[i][query] == value ) {
return parseInt(i);
}
}
return -1;
},
/**
* 正则匹配
* @param {String} type 匹配类型
* @param {String} value 匹配值
*/
reg (type, value) {
const regs = {
//身份证证则
idcard: new RegExp(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/),
//手机正则
mobile: new RegExp(/^1[3456789]\d{9}$/),
//固定电话正则
phone: new RegExp(/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/),
//金额验证
price: new RegExp(/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/),
//邮箱验证
email: new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/),
//银行卡
bankcard: new RegExp(/^([1-9]{1})(\d{15}|\d{18})$/)
}
return regs[type].test(value);
},
/**
* 计算2个时间差的分钟数或者秒钟数或时钟数
* @param {datetime} time1 开始时间
* @param {datetime} time2 结束时间
*/
timeMinuse (time1, time2, type = 'minutes') {
//判断开始时间是否大于结束日期
let date1 = new Date(time1);
let date2 = new Date(time2);
if ( date1 > date2 ) {
console.log("开始时间不能大于结束时间！");
return false;
}
let seconds = date2.getTime() / 1000 - date1.getTime() / 1000;
return type == 'minutes' ? (seconds / 60) : type == 'hours' ? (seconds / 60 / 60) : seconds;
},
/**
* 判断值类型返回字符
* @param {datetime} value 需要判断类型的值
*/
typeof (value) {
let type = Object.prototype.toString.call(value);
return type.slice(8, type.length - 1)
},
/**
* 生成随机字符串
* @param {Number} len 长度
*/
randomString (len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
/**
* 生成随机ID
*/
randomID () {
let mydate = new Date();
return mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
},
/**
* 生成随机不重复整数
* @param {Number} len 长度
*/
randomSoleNumber (len) {
let min = 0;
let max = len - 1;
let arr = [];
while ( arr.length < len ) {
let value = Math.floor(Math.random() * (max - min + 1)) + min;
if ( arr.indexOf(value) == -1 ) {
arr.push( value )
}
}
return arr;
},
/**
* 16进制颜色转化为rgb
* @param {String} hex 16进制颜色
*/
hex2rgb (hex) {
hex = hex.length == 7 ? hex : '#' + hex.slice(1, 4) + hex.slice(1, 4)
let str="rgb("
const r = parseInt(hex.slice(1,3),16).toString(); //ff slice不包括end
const g = parseInt(hex.slice(3,5),16).toString(); //00
const b = parseInt(hex.slice(5,7),16).toString(); //ff
str += r+","+g+","+b+")";
return str
},
/**
* 16进制颜色转化为rgba
* @param {String} hex 16进制颜色
*/
hex2rgba (hex, opacity) {
hex = hex.length == 7 ? hex : '#' + hex.slice(1, 4) + hex.slice(1, 4)
let str="rgba("
const r = parseInt(hex.slice(1,3),16).toString(); //ff slice不包括end
const g = parseInt(hex.slice(3,5),16).toString(); //00
const b = parseInt(hex.slice(5,7),16).toString(); //ff
str += r+","+g+","+b+","+opacity+")";
return str
},
/**
* byte转化为文件大小
* @param {Number} byte 位
*/
byte2Size (byte) {
let sizeString = ''
if(byte == 0){
sizeString = "0B";
}else if(byte < 1024){
sizeString = byte + "B";
}else if(byte < 1048576){
sizeString = (byte/1024).toFixed(2) + "KB";
}else if (byte < 1073741824){
sizeString = (byte/1048576).toFixed(2) + "MB";
}else{
sizeString = (byte/1073741824).toFixed(2) + "GB";
}
return sizeString;
},
// 深度克隆
deepClone (obj) {
if(typeof obj !== "object" && typeof obj !== 'function') {
//原始类型直接返回
return obj;
}
var o = isArray(obj) ? [] : {};
for(let i in obj) {
if(obj.hasOwnProperty(i)){
o[i] = typeof obj[i] === "object" ? this.deepClone(obj[i]) : obj[i];
}
}
return o;
},
/**
* 将数字转为带中文单位的字符串
* @param {Number} num 数字
*/
numtounit (num) {
let units = [{
label: '万',
value: 10000,
min: 1000
},{
label: '亿',
value: 100000000,
min: 100000000
},{
label: '兆',
value: 10000000000000000,
min: 100000000000000000
}]
let value = num
units.forEach(unit => {
if ( num >= unit.min ) {
value = (num / unit.value).toFixed(2) + unit.label
}
})
return value
},
/**
* 判断像素单位，没有则加上rpx
* @param {String} value 像素
*/
pixelunit (value) {
if ( value.toString().indexOf('px') > -1 || value.toString().indexOf('em') > -1 || value.toString().indexOf('auto') > -1 || value.toString().indexOf('%') > -1 ) {
return value
} else {
return value + 'rpx'
}
},
/**
* 判断像素单位，全部转为px
* @param {String} value 像素
*/
unitpixel (value) {
if ( value.toString().indexOf('rpx') > -1 ) {
return uni.upx2px(value.replace('rpx', ''))
} else if ( value.toString().indexOf('px') > -1 ) {
return parseFloat(value.replace('px', ''))
} else if ( value.toString().indexOf('em') > -1 || value.toString().indexOf('auto') > -1 || value.toString().indexOf('%') > -1 ) {
return value
} else {
return parseFloat(uni.upx2px(value))
}
},
/**
* 判断像素单位，转化为rpx
* @param {String} value 值
* @param {String} unit 返回结果是否带上单位
*/
anytorpx (value, unit = true) {
if ( value.toString().indexOf('rpx') > -1 ) {
return unit ? value : parseFloat(value.replace('rpx', ''))
} else if ( value.toString().indexOf('px') > -1 ) {
return parseFloat(value.replace('px', '') * (750 / uni.getSystemInfoSync().windowWidth)) + (unit ? 'rpx' : 0)
} else if ( value.toString().indexOf('auto') > -1 ) {
return 'auto'
} else if ( value.toString().indexOf('%') > -1 ) {
return parseFloat((value.replace('%', '') / 100) * 750) + (unit ? 'rpx' : 0)
} else if (value.toString().indexOf('em') > -1 || value.toString().indexOf('rem') > -1 ) {
return parseFloat(value.replace('em', '').replace('rem', '') * 32) + (unit ? 'rpx' : 0)
} else if ( /^\d+$/.test(value) ) {
return parseFloat(value) + (unit ? 'rpx' : 0)
}
},
/**
* 判断像素单位，转化为px
* @param {String} value 值
* @param {String} unit 返回结果是否带上单位
*/
anytopx (value, unit = false) {
if ( value.toString().indexOf('rpx') > -1 ) {
return uni.upx2px(value.replace('rpx', '')) + (unit ? 'px' : 0)
} else if ( value.toString().indexOf('px') > -1 ) {
return parseFloat(value.replace('px', '')) + (unit ? 'px' : 0)
} else if ( value.toString().indexOf('auto') > -1 ) {
return 'auto'
} else if ( value.toString().indexOf('%') > -1 ) {
return parseFloat((value.replace('%', '') / 100) * uni.getSystemInfoSync().windowWidth) + (unit ? 'px' : 0)
} else if (value.toString().indexOf('em') > -1 || value.toString().indexOf('rem') > -1 ) {
return parseFloat(value.replace('em', '').replace('rem', '') * uni.getSystemInfoSync().windowWidth) + (unit ? 'px' : 0)
} else if ( /^\d+$/.test(value) ) {
return parseFloat(value) + (unit ? 'px' : 0)
}
},
getRefs (components, name, current) {
// #ifndef MP
return current >= 0 ? components.$refs[name][current] : components.$refs[name]
// #endif
// #ifdef MP
return {}
// #endif
},
//获取节点
getEl (el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) {
return el.ref;
} else {
return el instanceof HTMLElement ? el : el.$el;
}
},
/**
* 获取指定父节点
* @param {String} components 当前实例
* @param {String} name 父节点名称
*/
getParent(name, components) {
let parent = components.$parent
if (parent) {
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (parent) {
parentName = parent.$options.name
} else {
return null
}
}
return parent
}
return null
},
/**
* 获取指定子节点
* @param {String} components 当前实例
* @param {String} name 父节点名称
*/
getChildrens(names, components) {
let arr = []
let childs = names.split(',')
const dowhile = (children) => {
if ( this.typeof(children) == 'Array' ) {
children.forEach(child => {
if ( childs.indexOf(child.$options.name) > -1 ) {
arr.push(child)
}
if ( child.$children && child.$children.length > 0 ) {
dowhile(child.$children)
}
})
}
}
dowhile(components.$children)
return arr;
},
/**
* 获取指定子节点
* @param {String} selector 节点class或者id
* @param {String} el 节点
* @param {String} components 当前实例
*/
getRect (selector, el, components) {
return new Promise(resolve => {
// #ifdef APP-NVUE
uni.requireNativePlugin('dom').getComponentRect(el, res => {
resolve(res.size)
})
// #endif
// #ifndef APP-NVUE
uni.createSelectorQuery().in(components).select(selector).boundingClientRect(data => {
resolve(data)
}).exec();
// #endif
})
}
}
// 判断arr是否为一个数组，返回一个bool值
function isArray (arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
}
function zeroize (val) {
return val >= 10 ? val : '0' + val;
}

81
uni_modules/yingbing-flip/package.json Normal file
View File

@ -0,0 +1,81 @@
{
"id": "yingbing-flip",
"displayName": "好用翻页组件",
"version": "1.0.4",
"description": "高性能翻页组件",
"keywords": [
"翻页"
],
"repository": "https://gitee.com/yingbing-developer/yingbing-flip.git",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

344
uni_modules/yingbing-flip/readme.md Normal file
View File

@ -0,0 +1,344 @@
#使用须知
* 1、这是一个翻页组件，适用于小说翻页或答题功能
* 2、这个插件支持APP-NVUE、APP-VUE、H5、微信小程序
* 3、该组件滑动项同时只能存在当前项、前面项、后面项3个，其余项会被销毁
* 4、如果想要构建阅读器需要配合[好用阅读分页插件](https://ext.dcloud.net.cn/plugin?id=6026)使用
* 5、有什么不懂，可以加群 1087735942 聊
#props属性
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :----- | :----: | :----: | :----: | :---- |
| data | Array | ---- | ---- | 列表数据 |
| current | Number | 0 | ---- | 初始化位置 |
| vertical | Boolean | false | true/false | 垂直滑动 |
| duration | Number | 100 | ---- | 滑动动画时间 |
| bgColor | String | ---- | ---- | 背景色 |
| pulldownable | Boolean | false | true/false | 开启下拉刷新 |
| pullupable | Boolean | false | true/false | 开启上拉加载 |
| pulldownHeight | Number | 80 | ---- | 下拉刷新控件高度（px） |
| pullupHeight | Number | 80 | ---- | 上拉加载控件高度（px） |
| sliderFault | Number | 20 | ---- | 滑动容错距离（px） |
| type | String | real | real（仿真）/cover（覆盖）/none（无动画） | 翻页方式 |
| unableClickPage | Boolean | false | true/false | 关闭点击左右2侧翻页功能（type为none时忽略此属性） |
#event事件
| 事件名 | 参数 | 说明 |
| :----- | :----: | :---- |
| change | current: 当前滑动位置, detail: 当前滑动位置列表数据 | 位置改变事件 |
| pulldown | callback: 回调 | 下拉刷新事件 |
| pullup | callback: 回调 | 上拉加载事件 |
#内置方法
| 方法名 | 参数 | 说明 |
| :--- | :------ | :---- |
| refresh | ---- | 刷新滑动位置（替换数据时使用） |
| flipToNext | ---- | 翻到到下个位置 |
| flipToPrev | ---- | 翻到上个位置 |
#slot插槽
| 名称 | 说明 |
| :----- | :---- | :---- |
| pulldownDefault | 下拉加载默认提示 |
| pulldownReady | 下拉加载准备提示 |
| pulldownLoading | 下拉加载等待提示 |
| pulldownSuccess | 下拉加载成功提示 |
| pulldownFail | 下拉加载失败提示 |
| pullupDefault | 上拉加载默认提示 |
| pullupReady | 上拉加载准备提示 |
| pullupLoading | 上拉加载等待提示 |
| pullupSuccess | 上拉加载成功提示 |
| pullupFail | 上拉加载失败提示 |
#快速开始
```html
<yingbing-flip :data="list" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
}
}
```
#垂直滑动
```html
<yingbing-flip vertical :data="list" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
}
}
```
#下拉刷新
```html
<yingbing-flip :data="list" vertical pulldownable @pulldown="handlePulldown" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
<template #pulldownDefault>
<view class="pulldown">
<text>下拉刷新</text>
</view>
</template>
<template #pulldownReady>
<view class="pulldown">
<text>松开刷新</text>
</view>
</template>
<template #pulldownLoading>
<view class="pulldown">
<text>正在刷新</text>
</view>
</template>
<template #pulldownSuccess>
<view class="pulldown">
<text>刷新成功</text>
</view>
</template>
<template #pulldownFail>
<view class="pulldown">
<text>刷新失败</text>
</view>
</template>
</yingbing-flip>
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
},
methods: {
handlePulldown (callback) {
//模拟请求
setTimeout(() => {
let arr = []
for ( let i = 0; i < 10; i++ ) {
arr.push(i)
}
this.list = arr
callback('success') //成功回调
// callback('fail') //失败回调
}, 500)
}
}
}
```
```css
.pulldown {
display: flex;
align-items: center;
justify-content: center;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
}
```
#上拉加载
```html
<yingbing-flip :data="list" vertical pullupable @pullup="handlePullup" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
<template #pullupDefault>
<view class="pulldown">
<text>上拉加载</text>
</view>
</template>
<template #pullupReady>
<view class="pulldown">
<text>松开刷新</text>
</view>
</template>
<template #pullupLoading>
<view class="pulldown">
<text>正在刷新</text>
</view>
</template>
<template #pullupSuccess>
<view class="pulldown">
<text>刷新成功</text>
</view>
</template>
<template #pullupFail>
<view class="pulldown">
<text>刷新失败</text>
</view>
</template>
</yingbing-flip>
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
},
methods: {
handlePullup (callback) {
//模拟请求
setTimeout(() => {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
callback('success') //成功回调
// callback('fail') //失败回调
}, 500)
}
}
}
```
```css
.pulldown {
display: flex;
align-items: center;
justify-content: center;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
}
```
#JS控制滑动
```html
<yingbing-flip ref="flip" :data="list" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
<button @tap="flipToPrev">向前滑动</button>
<button @tap="flipToNext">向后滑动</button>
```
```javascript
export default {
data () {
return {
list: [1,2,3,5,6]
}
},
methods: {
flipToNext () {
this.$refs.flip.flipToNext()
},
flipToPrev () {
this.$refs.flip.flipToPrev()
}
}
}
```
#刷新组件
```html
<yingbing-flip ref="flip" :data="list" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
<button @tap="refresh">刷新</button>
```
```javascript
export default {
data () {
return {
list: [1,2,3,5,6]
}
},
methods: {
refresh () {
this.list = [7,8,9,10,11]
this.$refs.flip.refresh()
}
}
}
```

2718
unpackage/dist/dev/app-plus/app-service.js vendored
View File

File diff suppressed because one or more lines are too long

2952
unpackage/dist/dev/app-plus/app-view.js vendored
View File

File diff suppressed because one or more lines are too long