89 lines
4.1 KiB
Vue
89 lines
4.1 KiB
Vue
<template>
|
||
<ciy-header title="ciy-swiper组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">滑动多媒体轮播</view>
|
||
<view class="content">
|
||
暂未完成。<br/>
|
||
支持图片、视频轮播，如有标题则下方半透明显示标题。支持后三维效果切换。<br/>
|
||
属性: items[{title,src,url}], sec切换间隔, type(滑动/左右出头/左右三维), height高度, dot(圆点/方块)<br/>
|
||
</view>
|
||
</view>
|
||
<ciy-swiper :icon="'/img/face.png'" title="变更手机号" right="1300054****" @tap="gourl" url="/pages/demo/demo"></ciy-swiper>
|
||
<ciy-swiper :icon="ciysvg" title="开发者" right="众产"></ciy-swiper>
|
||
<ciy-swiper :icon="ciysvg" title="没有右侧信息"></ciy-swiper>
|
||
<ciy-swiper title="没有左侧图标" more></ciy-swiper>
|
||
<ciy-swiper title="不显示下边框1" noborder more></ciy-swiper>
|
||
<ciy-swiper title="不显示下边框2" noborder reddot="3" more></ciy-swiper>
|
||
<ciy-swiper title="没有左侧图标" reddot="132" right="众产"></ciy-swiper>
|
||
<ciy-swiper title="文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多" right="众产"></ciy-swiper>
|
||
<ciy-swiper title="文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多" right="辅助文字很多辅助文字很多辅助文字很多辅助文字很多" more></ciy-swiper>
|
||
<ciy-swiper :icon="ciysvg" title="右侧辅助文字超过3行" @tap="gourl" url="/pages/demo/demo" right="很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行很多行"></ciy-swiper>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">title</view>
|
||
<view class="tip">
|
||
左侧标题。<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">icon</view>
|
||
<view class="tip">
|
||
左侧图标。<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">right</view>
|
||
<view class="tip">
|
||
右侧文字。<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">more</view>
|
||
<view class="tip">
|
||
更多操作标识。<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">noborder</view>
|
||
<view class="tip">
|
||
是否显示下方边框条。<br/>
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">reddot</view>
|
||
<view class="tip">
|
||
显示右侧红标提示。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
ciysvg:'<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M987.136 384.512C919.552 131.584 668.16-22.528 415.232 27.136c219.648-41.984 434.176 79.36 488.96 283.136 57.344 214.016-82.944 437.76-313.344 499.2-49.664 13.312-78.848 64-65.536 113.152 13.312 49.664 64 78.848 113.152 65.536 263.168-70.144 418.816-340.48 348.672-603.648zM116.224 713.216C58.88 499.2 199.68 275.456 430.08 214.016c49.664-13.312 78.848-64 65.536-113.152C482.816 51.2 432.128 21.504 382.464 34.816c-263.68 70.656-419.84 340.992-349.184 604.16 67.584 252.928 319.488 407.04 571.392 356.864-219.648 42.496-433.664-78.848-488.448-282.624z m93.184-203.776L291.84 449.536c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z m516.096-60.416L808.96 509.952l-149.504-229.888-149.504 229.376 82.432-59.904c44.544-32.256 90.112-32.256 133.12-0.512z m-366.08 291.84L441.856 680.96c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z" fill="#56a4ef"></path></svg>'
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script> |