Skip to content

U
uniapp_vedio
Commit 16fe587f authored by jyx's avatar jyx
Browse files
Options

代码优化

parent a6d11fae
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 99 deletions
vedio/page-subs/sub_A/book-long-content/book-long-content.vue
View file @ 16fe587f
......@@ -88,7 +88,8 @@
userInfo: null,
showVipOpen: 0,
showBeanOpen: 0,
current: 1
current: 1,
height: 0
};
},
onLoad(options) {
......@@ -123,15 +124,13 @@
this.$nextTick(() => {
uni.startPullDownRefresh({})
})
// 绑定分享参数
// #ifdef MP-WEIXIN
wx.onCopyUrl(() => {
return {
query: `bookId=${this.bookData.id}`
let that = this
uni.getSystemInfo({
success(res) {
that.height = res.screenHeight
}
})
// #endif
},
onShow() {
refreshUserInfo();
......
vedio/page-subs/sub_A/book-long-content/components/detail-bottom.vue
View file @ 16fe587f
......@@ -42,7 +42,6 @@
<button class="c-button_clear cover-button" open-type="share"></button>
</view>
</view>
<view class="safe-placeholder" :style="[safePlaceholderStyle]"></view>
</view>
</template>
......@@ -76,7 +75,7 @@
},
data: function() {
return {
height: `100`,
height: `60`,
backgroundColor: `#fff`
}
},
......@@ -96,28 +95,19 @@
fixedBottomStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
// height = height + this.bottomSafeHeight
}
return {
bottom: `${height}rpx`
}
},
safePlaceholderStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
height: `${height}rpx`
bottom: `${height}px`
}
},
bottomStyle: function() {
let height = 100;
let height = 66;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
// height = height + this.bottomSafeHeight
}
return {
height: `${height}rpx`
return {
height: `${height}px`
}
},
likeIcon: function() {
......@@ -160,8 +150,8 @@
<style lang="scss" scoped>
.detail-bottom {
position: absolute;
height: 100rpx;
bottom: 0;
height: 66px;
bottom: 0;
z-index: 99;
.fixed-bottom {
......@@ -170,7 +160,7 @@
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
height: 66px;
display: flex;
flex-direction: row;
align-items: center;
......
vedio/page-subs/sub_A/book-long-content/components/detail-content.vue
View file @ 16fe587f
......@@ -5,10 +5,10 @@
<view class='content' :style="{'color':color}">
<view class="title"
:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin-bottom':lineHeight+'px'}">
{{info.data[read].sub}}
{{ '第' + catalogue + '章'}}
</view>
<view class="p" v-html='info.data[read].content'
:style="{'font-size':fontSize+'px','line-height':lineHeight+'px'}"></view>
<view v-html='info.data[read].content'
:style="{'font-size':fontSize+'px','line-height':lineHeight+'px','text-align':'left'}"></view>
</view>
</view>
......@@ -16,12 +16,11 @@
<view class="loading" v-if="size<1" :style="{'font-size':fontSize+'px'}"> 正在加载中... </view>
<swiper class="center" :current="step" :disable-programmatic-animation='true' :circular='false'
:indicator-dots="false" :autoplay="false" :interval="3000" :duration="500" @change="handleChange">
<swiper-item class='html' :style="{width:winWidth+'px',height:height+'px'}" v-for="(item,index) in size"
:key='index'>
<swiper-item v-for="(item,index) in size" :key='index'>
<view class="article" v-if="catalogue<=detail.freeNum"
:style="{width:winWidth+'px','color':color,'transform': 'translateY(-'+(index*height)+'px)'}">
:style="{'color':color,'transform': 'translateY(-'+getTransHeight(index)+'px)'}">
<view
:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin':(lineHeight * 0.6)+'px 0'}">
:style="{'font-size':(fontSize*1.6)+'px','line-height':lineHeight+'px','margin-bottom':lineHeight+'px','text-align':'left'}">
{{ '第' + catalogue + '章'}}
</view>
<view v-html='info.data[read].content'
......@@ -61,8 +60,7 @@
</swiper>
</view>
<view class='act' :style="{height:winHeight+'px'}" @touchstart="touchstart" @touchmove="touchMove"
@touchend="touchend">
<view class='act' @touchstart="touchstart" @touchmove="touchMove" @touchend="touchend">
<view class='item' @tap.stop='prev'></view>
<view class='center' @tap.stop="toggleShow"></view>
<view class='item' @tap.stop='next'></view>
......@@ -99,7 +97,6 @@
catalogue: 1,
isFisrt: true,
winWidth: 0,
winHeight: 0,
height: 0,
lineHeight: 0,
// 章节下标
......@@ -125,22 +122,27 @@
this.page = this.step / (this.size - 1) * 100
},
deep: true
},
cata: {
handler(val, oldVal) {
this.page = this.step / (this.size - 1) * 100
},
deep: true
}
},
destroyed() {
removeContentFormatChangeWatch(this);
},
mounted() {
let that = this
uni.getSystemInfo({
success(res) {
that.winWidth = res.screenWidth
that.winHeight = res.screenHeight
that.height = res.screenHeight - 100 - 50
that.lineHeight = (that.winHeight - 50) / 20
}
})
mounted() {
let _this = this
uni.getSystemInfo({
success(res) {
_this.winWidth = res.screenWidth
_this.height = res.screenHeight - 66
_this.lineHeight = (res.screenHeight - 66) / 16
}
})
// 监听样式变动
watchContentFormatChange((data) => {
let result = data.getFormatValue();
......@@ -163,13 +165,13 @@
} else {
if (this.catalogue != resultCatalogue) {
this.catalogue = resultCatalogue
// this.refreshChapterinfoData(this.catalogue)
this.refreshChapterinfoData(this.catalogue)
}
}
if (this.isFisrt) {
this.isFisrt = false
this.refreshChapterinfoData(3)
this.refreshChapterinfoData()
}
}, this)
......@@ -177,7 +179,6 @@
methods: {
reloadChapterinfoData() {
this.refreshChapterinfoData()
},
// 文章数据刷新
refreshChapterinfoData(chapterId = this.catalogue) {
......@@ -185,37 +186,26 @@
let id = this.detail.articleChapterList[chapterId - 1].id
getChapterinfoData(this.detail.id, id, (success, data) => {
if (success) {
this.info.title = data.chapterId
this.info.data.push({
this.info.data = [{
id: chapterId,
sub: data.chapterId,
content: data.content
})
}]
this.getHeight()
}
})
},
handleChange(e) {
console.log('change', e);
console.log('XXXXXXXX-step', this.step);
console.log('XXXXXXXX-read', this.read);
console.log('XXXXXXXX-size', this.size);
console.log('XXXXXXXX-page', this.page);
// if (this.catalogue != e.detail.index) {
// this.catalogue = e.detail.index
// if (this.detail.isUnlock) {
// this.changeCurrent()
// } else if (!this.detail.isUnlock && this.catalogue < this.detail.freeNum) {
// this.changeCurrent()
// }
// }
// console.log('change', e);
},
getHeight(prev) {
let _this = this
setTimeout(function() {
const query = uni.createSelectorQuery().in(_this);
query.select('#html .content').boundingClientRect(data => {
_this.size = Math.ceil(data.height / _this.height)
let _size = Math.ceil(data.height / _this.height)
_this.size = Math.ceil((data.height + _size * (_this.lineHeight * 2)) /
_this.height)
if (data.height < _this.height) {
_this.page = 100
}
......@@ -239,12 +229,13 @@
this.isClick = false
this.handleLoadmore((success, data) => {
if (success == "success") {
this.info.data.unshift({
id: this.catalogue,
sub: this.catalogue,
_this.info.data.unshift({
id: _this.catalogue,
sub: _this.catalogue,
content: data
})
this.catalogue -= 1
_this.catalogue -= 1
_this.changeCurrent()
_this.size = 0
_this.getHeight(true)
_this.isClick = true
......@@ -252,18 +243,17 @@
}
message.notify('加载失败')
this.isClick = false
_this.isClick = false
}, this.catalogue - 1)
} else {
message.notify('已经在最开头了')
}
}
this.toggle = false
}
},
next(from) {
if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum) {
if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum + 1) {
this.tapVip()
return
}
......@@ -284,13 +274,14 @@
this.isClick = false
// 加载下一章
this.handleLoadmore((success, data) => {
this.info.data.push({
id: this.catalogue,
sub: this.catalogue,
_this.info.data.push({
id: _this.catalogue,
sub: _this.catalogue,
content: data
})
_this.catalogue += 1
_this.catalogue += 1
_this.changeCurrent()
_this.read += 1
_this.size = 0
_this.step = 0
......@@ -307,11 +298,17 @@
}
}
}
this.toggle = false
}
},
getTransHeight(i) {
var tH = i * this.height
for (let j = 1; j <= i; j++) {
tH -= (this.lineHeight * 2)
}
return tH
},
toggleShow() {
if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum) {
if (!this.detail.isUnlock && this.catalogue >= this.detail.freeNum + 1) {
this.tapVip()
return
}
......@@ -381,9 +378,9 @@
<style lang="scss">
.page {
position: relative;
width: 100%;
height: 100%;
position: relative;
#html {
width: 100%;
......@@ -392,10 +389,13 @@
top: 0;
left: 0;
bottom: 0;
padding-top: 0;
box-sizing: border-box;
padding: 0 40rpx;
.content {
padding: 0 40rpx;
padding: 0;
background-color: #DCBD3B;
box-sizing: border-box;
font-weight: 400;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
......@@ -411,6 +411,7 @@
left: 0;
bottom: 0;
box-sizing: border-box;
padding: 0 40rpx;
.loading {
position: absolute;
......@@ -420,30 +421,24 @@
}
.center {
height: calc(100% - 66px);
display: flex;
flex-direction: row;
justify-content: flex-start;
height: calc(100% - 50rpx - 100rpx);
position: relative;
overflow-y: hidden;
.html {
width: 100%;
overflow-y: hidden;
.article {
padding: 10rpx 40rpx;
box-sizing: border-box;
font-weight: 400;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
text-indent: 36rpx;
}
.article {
box-sizing: border-box;
font-weight: 400;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
text-indent: 36rpx;
}
}
.slots {
position: absolute;
width: 100%;
height: calc(100% - 50rpx - 100rpx);
top: 0;
left: 0;
right: 0;
......@@ -512,7 +507,7 @@
.act {
width: 100%;
position: fixed;
z-index: 101;
z-index: 11;
top: 0;
left: 0;
bottom: 0;
......
vedio/page-subs/sub_A/book-long-content/components/setting-pop.vue
View file @ 16fe587f
<template>
<uni-popup ref='pop' type="bottom" :is-mask-click='false' :safe-area='false' @change='change'>
<uni-popup ref='pop' type="bottom" :is-mask-click='false' :safe-area='false' @change='change' @maskClick='tapMask'>
<view class="setting-box">
<view class="row">
<view class="title">
......@@ -90,6 +90,9 @@
close() {
this.$emit('close')
this.$refs.pop.close();
},
tapMask() {
this.showPop = false;
},
change(e) {
if (this.showPop == e.show) return;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment