增加other分包页面
我的页面里增加跳转other分包跳转(仅在ios不是浏览器审核时展示)
This commit is contained in:
90
tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
Normal file
90
tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸,所以在外面套一个"壳" -->
|
||||
<view>
|
||||
<view :id="elId" class="tn-index-anchor__wrap" :style="[wrapperStyle]">
|
||||
<view class="tn-index-anchor" :class="[active ? 'tn-index-anchor--active' : '']" :style="[customAnchorStyle]">
|
||||
<view v-if="useSlot">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<block v-else>
|
||||
<text>{{ index }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tn-index-anchor',
|
||||
props: {
|
||||
// 使用自定义内容
|
||||
useSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 索引字符
|
||||
index: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customAnchorStyle() {
|
||||
return Object.assign(this.anchorStyle, this.customStyle)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elId: this.$t.uuid(),
|
||||
// 内容的高度
|
||||
height: 0,
|
||||
// 内容的top
|
||||
top: 0,
|
||||
// 是否被激活
|
||||
active: false,
|
||||
// 样式(父组件外部提供)
|
||||
wrapperStyle: {},
|
||||
anchorStyle: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.parent = false
|
||||
},
|
||||
mounted() {
|
||||
this.parent = this.$t.$parent.call(this, 'tn-index-list')
|
||||
if (this.parent) {
|
||||
this.parent.childrens.push(this)
|
||||
this.parent.updateData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-index-anchor {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8rpx 24rpx;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
background-color: rgb(245, 245, 245);
|
||||
|
||||
&--active {
|
||||
right: 0;
|
||||
left: 0;
|
||||
color: $tn-main-color;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user