增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
254
tuniao-ui/components/tn-skeleton/tn-skeleton.vue
Normal file
254
tuniao-ui/components/tn-skeleton/tn-skeleton.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="show"
|
||||
class="tn-skeleton-class tn-skeleton"
|
||||
:class="[backgroundColorClass]"
|
||||
:style="[skeletonStyle]"
|
||||
@touchmove.stop.prevent
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in rectNodes"
|
||||
:key="$t.uuid()"
|
||||
class="tn-skeleton__item tn-skeleton__item--rect"
|
||||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||
:style="[itemStyle('rect', item)]"
|
||||
></view>
|
||||
<view
|
||||
v-for="(item, index) in circleNodes"
|
||||
:key="$t.uuid()"
|
||||
class="tn-skeleton__item tn-skeleton__item--circle"
|
||||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||
:style="[itemStyle('circle', item)]"
|
||||
></view>
|
||||
<view
|
||||
v-for="(item, index) in filletNodes"
|
||||
:key="$t.uuid()"
|
||||
class="tn-skeleton__item tn-skeleton__item--fillet"
|
||||
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||
:style="[itemStyle('fillet', item)]"
|
||||
></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
name: 'tn-skeleton',
|
||||
mixins: [ componentsColorMixin ],
|
||||
props: {
|
||||
// 显示骨架屏
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 需要渲染的元素背景颜色
|
||||
elBackgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 开启加载动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 矩形元素自定义样式
|
||||
rectCustomStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 圆形元素自定义样式
|
||||
circleCustomStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 圆角元素自定义样式
|
||||
filletCustomStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
elBackgroundColorStyle() {
|
||||
return this.$t.color.getBackgroundColorStyle(this.elBackgroundColor)
|
||||
},
|
||||
elBackgroundColorClass() {
|
||||
return this.$t.color.getBackgroundColorInternalClass(this.elBackgroundColor)
|
||||
},
|
||||
// 骨架屏样式
|
||||
skeletonStyle() {
|
||||
let style = {}
|
||||
style.width = this.skeletonWidth + 'px'
|
||||
style.height = this.skeletonHeight + 'px'
|
||||
if (this.backgroundColorStyle) {
|
||||
style.backgroundColor = this.backgroundColorStyle
|
||||
}
|
||||
style.left = this.left + 'px'
|
||||
style.top = this.top + 'px'
|
||||
return style
|
||||
},
|
||||
// 元素样式
|
||||
itemStyle() {
|
||||
return (type, item) => {
|
||||
let style = {}
|
||||
style.width = item.width + 'px'
|
||||
style.height = item.height + 'px'
|
||||
if (this.elBackgroundColorStyle) {
|
||||
style.backgroundColor = this.elBackgroundColorStyle
|
||||
}
|
||||
style.left = (item.left - this.left) + 'px'
|
||||
style.top = (item.top - this.top) + 'px'
|
||||
if (type === 'rect') {
|
||||
Object.assign(style, this.rectCustomStyle)
|
||||
} else if (type === 'circle') {
|
||||
style.borderRadius = (item.width / 2) + 'px'
|
||||
Object.assign(style, this.circleCustomStyle)
|
||||
} else if (type === 'fillet') {
|
||||
Object.assign(style, this.filletCustomStyle)
|
||||
}
|
||||
return style
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 骨架屏宽度
|
||||
skeletonWidth: 750,
|
||||
// 骨架屏高度
|
||||
skeletonHeight: 1500,
|
||||
// 圆角元素
|
||||
filletNodes: [],
|
||||
// 圆形元素
|
||||
circleNodes: [],
|
||||
// 矩形元素
|
||||
rectNodes: [],
|
||||
// 元素偏移位置
|
||||
top: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
// 获取系统信息
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.skeletonWidth = systemInfo.safeArea.width
|
||||
this.skeletonHeight = systemInfo.safeArea.height
|
||||
this.selectQueryInfo()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 查询节点信息
|
||||
selectQueryInfo() {
|
||||
// 获取整个父容器的宽高作为骨架屏的宽高
|
||||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||
let query = null
|
||||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||
// #ifdef MP-WEIXIN
|
||||
query = uni.createSelectorQuery().in(this.$parent)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
|
||||
console.log(res);
|
||||
this.skeletonWidth = res[0][0].width
|
||||
this.skeletonHeight = res[0][0].height
|
||||
this.top = res[0][0].bottom - res[0][0].height
|
||||
this.left = res[0][0].left
|
||||
})
|
||||
|
||||
// 获取元素列表
|
||||
this.getRectElements()
|
||||
this.getCircleElements()
|
||||
this.getFillteElements()
|
||||
},
|
||||
// 矩形元素列表
|
||||
getRectElements() {
|
||||
let query = null
|
||||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||
// #ifdef MP-WEIXIN
|
||||
query = uni.createSelectorQuery().in(this.$parent)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
|
||||
this.rectNodes = res[0]
|
||||
})
|
||||
},
|
||||
// 圆形元素列表
|
||||
getCircleElements() {
|
||||
let query = null
|
||||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||
// #ifdef MP-WEIXIN
|
||||
query = uni.createSelectorQuery().in(this.$parent)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
|
||||
this.circleNodes = res[0]
|
||||
})
|
||||
},
|
||||
// 圆角元素列表
|
||||
getFillteElements() {
|
||||
let query = null
|
||||
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||
// #ifdef MP-WEIXIN
|
||||
query = uni.createSelectorQuery().in(this.$parent)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
query = uni.createSelectorQuery()
|
||||
// #endif
|
||||
query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
|
||||
this.filletNodes = res[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tn-skeleton {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&__item {
|
||||
position: absolute;
|
||||
background-color: #F0F0F0;
|
||||
|
||||
&--fillet {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&--fade {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #E6E6E6;
|
||||
animation-duration: 1.5s;
|
||||
animation-name: blink;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user