102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<template>
|
||
<ciy-header v-if="props.slot" ref="header" :title="props.title" :mode="props.mode">
|
||
<view class="txt-left" style="margin-left:3em;color:var(--dag6);">自定义标题样式</view>
|
||
</ciy-header>
|
||
<ciy-header v-else ref="header" :title="props.title" :mode="props.mode"></ciy-header>
|
||
<view>
|
||
<view>
|
||
<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
|
||
<ciy-query ref="query"></ciy-query>
|
||
<view>header内slot内容</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">标题栏</view>
|
||
<view class="content">
|
||
<view class="txt-wb">原理</view>
|
||
<view class="tip">
|
||
通过mode可独立扩展多种标题栏效果。<br />
|
||
header_statusbar_height是系统栏高度。<br />
|
||
header_title_height是标题栏高度。<br />
|
||
header_title_margin是标题栏左右边界。<br />
|
||
标题栏是以小程序胶囊做为参照。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="slt">slot自定义标题部分</view>
|
||
<view style="margin:1em;">
|
||
<ciy-switch v-model="props.slot"></ciy-switch>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">mode</view>
|
||
<view class="tip">
|
||
标题栏显示样式<br />
|
||
title: 默认效果。<br />
|
||
左侧返回键，中间标题。<br />
|
||
tran: 全屏效果。<br />
|
||
左侧漂浮返回键。<br />
|
||
scroll: 顶部全屏效果，滚动后渐变默认效果。<br />
|
||
左侧返回键，中间标题。<br />
|
||
</view>
|
||
<view><ciy-radio left v-model="props.mode" :range="[{id:'title',name:'title'},{id:'tran',name:'tran'},{id:'scroll',name:'scroll'}]"></ciy-radio></view>
|
||
<view class="hr"></view>
|
||
<template v-if="props.mode == 'title'">
|
||
<view class="prp">title</view>
|
||
<view class="tip">标题文本</view>
|
||
<view>
|
||
<ciy-radio left v-model="props.title" :range="[{id:'ciy-header组件',name:'短标题'},{id:'标题1标题2标题3',name:'中标题'},{id:'标题1标题2标题3标题4标题5标题6标题7标题8标题9',name:'长标题'}]"></ciy-radio>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">Getheight</view>
|
||
<view class="tip">获取组件高度</view>
|
||
<button class="btn sm" @tap="callfun('header', 'Getheight')">调用</button>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
<!-- <view class="evt">@change</view> -->
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="bg6 sti py4 px4" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
|
||
顶部悬停
|
||
</view>
|
||
<view v-for="n in 20" :key="n" class="zw"> 占位 {{n}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props:{
|
||
title:'ciy-header组件',
|
||
mode:'title'
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script> |