feat: 首次提交
This commit is contained in:
peerless_hero
80
pages/component/nav/bottomNavbar/bottomNavbar.vue
Normal file
80
pages/component/nav/bottomNavbar/bottomNavbar.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">BottomNavbar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">BottomNavbar 底部导航栏，用于提供页面的导航能力。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-bottom-navbar :items="items" :isFixed="false"></fui-bottom-navbar>
|
||||
<view class="fui-section__title">改变颜色</view>
|
||||
<fui-bottom-navbar background="#222" color="#d1d1d1" lineColor="#333" :items="items" :isFixed="false">
|
||||
</fui-bottom-navbar>
|
||||
</view>
|
||||
<fui-bottom-navbar @init="init" @click="onClick" left="8" :items="options">
|
||||
</fui-bottom-navbar>
|
||||
<fui-bubble-box width="200" :size="28" direction="top" :show="show" :triangle="{left:100}" :bottom="height"
|
||||
:left="32" :items="subItems" @click="subClick" @close="onClose"></fui-bubble-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: ['历史文章', '面试总结', '欢迎投稿'],
|
||||
options: [{
|
||||
text: '最新动态',
|
||||
name: 'menu',
|
||||
size: 24
|
||||
}, {
|
||||
text: '学习平台'
|
||||
}, {
|
||||
text: '加入我们'
|
||||
}],
|
||||
subItems: [{
|
||||
text: '官方新闻'
|
||||
}, {
|
||||
text: '线下活动'
|
||||
}, {
|
||||
text: '商城优惠'
|
||||
}],
|
||||
height: 100,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
init(e) {
|
||||
this.height = Math.ceil(e.height / e.windowWidth * 750)
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
if (e.index === 0) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.fui.toast(e.text)
|
||||
}
|
||||
},
|
||||
subClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(this.subItems[e.index].text)
|
||||
this.onClose()
|
||||
},
|
||||
onClose() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
176
pages/component/nav/bottomPopup/bottomPopup.vue
Normal file
176
pages/component/nav/bottomPopup/bottomPopup.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 4 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">BottomPopup</view>
|
||||
<view class="fui-page__desc">BottomPopup 底部弹出层，从底部弹出的浮层，引导用户进行相关操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showPopup(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="案例一" bold @click="showPopup(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="内容可滚动" :margin="['24rpx']" bold
|
||||
@click="showPopup(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
|
||||
<fui-bottom-popup :show="show" @close="closePopup(1)">
|
||||
<view class="fui-custom__wrap">
|
||||
这是自定义内容区
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
|
||||
<!--案例一-->
|
||||
<fui-bottom-popup :show="show2" :maskClosable="false">
|
||||
<view class="fui-popup__container">
|
||||
<text class="fui-title">测试标题一</text>
|
||||
<text class="fui-sub__title">测试标题一的副标题</text>
|
||||
<text class="fui-descr">辅助描述内容，可根据实际需要安排</text>
|
||||
<text class="fui-sub__descr">辅助提示内容，可根据实际需要安排</text>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" width="240rpx" height="80rpx" text="辅助操作" :margin="['0','16rpx']">
|
||||
</fui-button>
|
||||
<fui-button width="240rpx" height="80rpx" text="主操作" :margin="['0','16rpx']"></fui-button>
|
||||
</view>
|
||||
|
||||
<view class="fui-icon__close" @tap="closePopup(2)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
|
||||
<fui-bottom-popup :show="show3" @close="closePopup(3)">
|
||||
<view class="fui-scroll__wrap">
|
||||
<view class="fui-title fui-title__pb">测试标题二</view>
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<fui-list-cell v-for="(item,index) in itemList" :key="index">item{{index+1}}</fui-list-cell>
|
||||
</scroll-view>
|
||||
<view class="fui-icon__close" @tap="closePopup(3)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-bottom-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
itemList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else if (type === 2) {
|
||||
this.show2 = true
|
||||
} else {
|
||||
this.show3 = true
|
||||
}
|
||||
},
|
||||
closePopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else if (type === 2) {
|
||||
this.show2 = false
|
||||
} else {
|
||||
this.show3 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-custom__wrap {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 案例一 start*/
|
||||
.fui-popup__container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-sub__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #7F7F7F;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
font-weight: bold;
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-sub__descr {
|
||||
font-size: 26rpx;
|
||||
color: #B2B2B2;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
height: 144rpx;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
/* 案例一 end*/
|
||||
.fui-scroll__wrap {
|
||||
padding-top: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
|
||||
.fui-title__pb {
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
</style>
|
||||
146
pages/component/nav/bubbleBox/bubbleBox.vue
Normal file
146
pages/component/nav/bubbleBox/bubbleBox.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 4072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">BubbleBox <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">BubbleBox 气泡框，弹出气泡式的卡片浮层。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-bubble-box :items="items" direction="top" position="absolute" :show="show1"
|
||||
@click="itemClick($event,1)" @close="onClose(1)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="上方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(1)"></fui-button>
|
||||
</fui-bubble-box>
|
||||
<view class="fui-bubble-box">
|
||||
<fui-bubble-box background="#4c4c4c" color='#fff' lineColor="#666" :items="items" direction="right"
|
||||
position="absolute" :triangle="{top:78}" :show="show3" @click="itemClick($event,3)"
|
||||
@close="onClose(3)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="右侧显示" bold @click="bubble(3)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
<fui-bubble-box :items="items" direction="left" position="absolute" :triangle="{top:78}" :show="show2"
|
||||
@click="itemClick($event,2)" @close="onClose(2)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="左侧显示" bold @click="bubble(2)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
</view>
|
||||
<fui-bubble-box :items="items" direction="bottom" position="absolute" :show="show4"
|
||||
@click="itemClick($event,4)" @close="onClose(4)">
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="下方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(4)">
|
||||
</fui-button>
|
||||
</fui-bubble-box>
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="左上方显示" bold @click="bubble(5)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" width="320rpx" height="84rpx" text="右上方显示" bold :margin="['24rpx']"
|
||||
@click="bubble(6)">
|
||||
</fui-button>
|
||||
<fui-bubble-box :items="items" :show="show5" :left="8" :triangle="{left:56}" @click="itemClick($event,5)"
|
||||
@close="onClose(5)"></fui-bubble-box>
|
||||
<fui-bubble-box :padding="['26rpx','30rpx']" :right="8" background="#4c4c4c" color='#fff' lineColor="#666" :items="items" :show="show6"
|
||||
@click="itemClick($event,6)" @close="onClose(6)">
|
||||
</fui-bubble-box>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
text: 'First UI',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
text: '气泡框',
|
||||
src: '/static/images/common/logo.png'
|
||||
}],
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
bubble(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.show1 = true
|
||||
break;
|
||||
case 2:
|
||||
this.show2 = true
|
||||
break;
|
||||
case 3:
|
||||
this.show3 = true
|
||||
break;
|
||||
case 4:
|
||||
this.show4 = true
|
||||
break;
|
||||
case 5:
|
||||
this.show5 = true
|
||||
break;
|
||||
case 6:
|
||||
this.show6 = true
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
itemClick(e, type) {
|
||||
console.log(e)
|
||||
this.onClose(type)
|
||||
},
|
||||
onClose(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.show1 = false
|
||||
break;
|
||||
case 2:
|
||||
this.show2 = false
|
||||
break;
|
||||
case 3:
|
||||
this.show3 = false
|
||||
break;
|
||||
case 4:
|
||||
this.show4 = false
|
||||
break;
|
||||
case 5:
|
||||
this.show5 = false
|
||||
break;
|
||||
case 6:
|
||||
this.show6 = false
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-bubble-box {
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
100
pages/component/nav/drawer/drawer.vue
Normal file
100
pages/component/nav/drawer/drawer.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Drawer</view>
|
||||
<view class="fui-page__desc">Drawer 抽屉，抽屉式导航，用于展示侧滑菜单，侧滑导航。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="从右往左开" bold :margin="['24rpx']"
|
||||
@click="showDrawer(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="从左往右开" bold @click="showDrawer(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-drawer :show="show" @close="closeDrawer(1)">
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<view>
|
||||
<fui-list-cell arrow v-for="(item,index) in itemList" :key="index">
|
||||
item{{index+1}}
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</fui-drawer>
|
||||
|
||||
<fui-drawer :show="show2" direction="left" :radius="24" :maskClosable="false">
|
||||
<view class="fui-scroll__view">
|
||||
<view class="fui-title">左侧菜单栏</view>
|
||||
<scroll-view scroll-y style="height: 720rpx;">
|
||||
<view>
|
||||
<fui-list-cell v-for="(item,index) in itemList" :key="index">
|
||||
item{{index+1}}
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="warning" btn-size="medium" text="关闭菜单栏" bold @click="closeDrawer(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</fui-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show2: false,
|
||||
itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDrawer(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.show2 = true
|
||||
}
|
||||
},
|
||||
closeDrawer(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else {
|
||||
this.show2 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 520rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
padding: 64rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
131
pages/component/nav/fab/fab.vue
Normal file
131
pages/component/nav/fab/fab.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Fab <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Fab 浮动按钮，主要特点是轻盈、便捷、高效，用于在屏幕上执行主要或最常见的操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']" @click="fab(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="更换背景色" bold @click="fab(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="图标换为文本" bold :margin="['24rpx']" @click="fab(3)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="切换位置" bold @click="fab(4)">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-fab :background="background" :position="isLeft?'left':'right'" :fabs="fabs" @click="handleClick"></fui-fab>
|
||||
|
||||
<fui-fab :zIndex="10" :position="isLeft?'right':'left'" @click="fabClick">
|
||||
<fui-icon name="edit-fill" color="#fff"></fui-icon>
|
||||
</fui-fab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLeft: true,
|
||||
items: [{
|
||||
name: 'star',
|
||||
text: '收藏'
|
||||
}, {
|
||||
name: 'share',
|
||||
text: '分享'
|
||||
}, {
|
||||
name: 'fabulous',
|
||||
text: '点赞'
|
||||
}, {
|
||||
name: 'comment',
|
||||
text: '评论'
|
||||
}],
|
||||
items2: [{
|
||||
name: 'calendar',
|
||||
text: '日程安排',
|
||||
background: '#3BBE88'
|
||||
}, {
|
||||
name: 'location',
|
||||
text: '地理位置',
|
||||
background: '#F7953B'
|
||||
}, {
|
||||
name: 'community',
|
||||
text: '社区交流',
|
||||
background: '#3493F0'
|
||||
}],
|
||||
list: [{
|
||||
abbr: 'A',
|
||||
abbrSize: 48,
|
||||
text: 'Apple'
|
||||
}, {
|
||||
abbr: 'F',
|
||||
abbrSize: 48,
|
||||
text: 'firstui@126.com'
|
||||
}, {
|
||||
abbr: 'S',
|
||||
abbrSize: 48,
|
||||
text: 'subject@126.com'
|
||||
}, {
|
||||
name: 'message-fill',
|
||||
abbrSize: 56,
|
||||
text: '提醒'
|
||||
}],
|
||||
background: '#465CFF',
|
||||
fabs: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fabs = this.items
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
fab(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.fabs = this.items
|
||||
this.background = '#465CFF';
|
||||
this.fui.toast('已恢复默认状态~')
|
||||
break;
|
||||
case 2:
|
||||
this.fabs = this.items2
|
||||
this.background = 'linear-gradient(300deg, #F53423 0%, #F67F48 100%)';
|
||||
this.fui.toast('已更换~')
|
||||
break;
|
||||
case 3:
|
||||
this.fabs = this.list
|
||||
this.background = '#465CFF';
|
||||
this.fui.toast('已切换~')
|
||||
break;
|
||||
case 4:
|
||||
this.isLeft = !this.isLeft
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log(e)
|
||||
this.fui.toast(`您点击了【${this.fabs[e.index].text}】按钮~`)
|
||||
},
|
||||
fabClick() {
|
||||
this.fui.toast('这是一个单独的按钮~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
292
pages/component/nav/indexList-A/index.list.js
Normal file
292
pages/component/nav/indexList-A/index.list.js
Normal file
@ -0,0 +1,292 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 407254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
//约定的数据格式如下，其他属性可自行补充
|
||||
export default [{
|
||||
//索引，右侧显示，单字符，必选
|
||||
letter: '★',
|
||||
//索引描述，列表内容上方显示，若为空则显示letter，可选
|
||||
descr: '★ 星标朋友',
|
||||
//该索引下内容，可选，不传则不显示该索引
|
||||
data: [{
|
||||
//主内容。必选
|
||||
text: 'FirstUI',
|
||||
//图片。isSrc为true时生效，可选
|
||||
src: '/static/images/common/img_logo.png',
|
||||
//是否选中。isSelect为true时生效，可选
|
||||
//checked:false,
|
||||
//附属内容。可选
|
||||
// subText: ''
|
||||
}, {
|
||||
text: '爸爸',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '妈妈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'A',
|
||||
data: [{
|
||||
text: '阿杰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'A 甜心',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '阿威',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Aaron',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'B',
|
||||
data: [{
|
||||
text: '爸爸',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '毕果',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '别亦难',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '斌斌',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '冰冰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '兵兵兵',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'C',
|
||||
data: [{
|
||||
text: 'c.',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Carry',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '测试-小张',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '产品经理',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'CoCo',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'D',
|
||||
data: [{
|
||||
text: '大河马',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Daisy',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '叮叮',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'E',
|
||||
data: [{
|
||||
text: 'emmi',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'eqq',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'F',
|
||||
data: [{
|
||||
text: 'Fast',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '风居',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'FirstUI',
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'G',
|
||||
data: [{
|
||||
text: '感恩',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '干饭人',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '公寓小区',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'H',
|
||||
data: [{
|
||||
text: '哈哈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '海绵',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '厚德载物',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'I',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'J',
|
||||
data: [{
|
||||
text: 'Jennie',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '江月明',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '经理',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'K',
|
||||
data: [{
|
||||
text: '开学了',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Kevin',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '空谷幽兰',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'L',
|
||||
data: [{
|
||||
text: 'L-Zz',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '老费',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '李美丽',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'M',
|
||||
data: [{
|
||||
text: '妈妈',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '芒果味的橙子',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Me',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'N',
|
||||
data: [{
|
||||
text: 'NeiL',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '牛气冲天',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '诺言',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'O',
|
||||
data: [{
|
||||
text: '欧大大',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '欧-HR',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'P',
|
||||
data: [{
|
||||
text: 'Peter',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '蒲公英',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Q',
|
||||
data: [{
|
||||
text: '七语',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '全球时刻',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'R',
|
||||
data: [{
|
||||
text: '冉不三',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: 'Rose',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'S',
|
||||
data: [{
|
||||
text: 'sandy',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '时光匆匆',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'T',
|
||||
data: [{
|
||||
text: '谭五',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '田六',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'U',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'V',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'W',
|
||||
data: [{
|
||||
text: '王不休',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'X',
|
||||
data: [{
|
||||
text: '西红柿炒鸡蛋',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Y',
|
||||
data: [{
|
||||
text: '烟花易冷',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: 'Z',
|
||||
data: [{
|
||||
text: '中国电信',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}, {
|
||||
letter: '#',
|
||||
data: [{
|
||||
text: '69号公寓',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}, {
|
||||
text: '2513',
|
||||
src: '/static/images/common/icon_tabbar_2x.png'
|
||||
}]
|
||||
}]
|
||||
47
pages/component/nav/indexList-A/indexList-A.vue
Normal file
47
pages/component/nav/indexList-A/indexList-A.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<fui-index-list isSrc :listData="lists" @init="init" @click="itemClick">
|
||||
<fui-search-bar @search="search"></fui-search-bar>
|
||||
<template v-slot:footer>
|
||||
<fui-loadmore v-if="!show"></fui-loadmore>
|
||||
<fui-divider text="66个朋友及联系人" v-if="show"></fui-divider>
|
||||
</template>
|
||||
</fui-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lists from './index.list.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//如果是请求数据返回，返回后直接整体赋值给lists（注意数据格式正确）
|
||||
lists: lists,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
// this.show = true;
|
||||
// }, 500)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.show = true;
|
||||
},
|
||||
search(e) {
|
||||
this.fui.toast(`搜索：${e.detail.value}`)
|
||||
//相关逻辑自行处理
|
||||
// ...
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
362
pages/component/nav/indexList-B/index.list.js
Normal file
362
pages/component/nav/indexList-B/index.list.js
Normal file
@ -0,0 +1,362 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 14 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
//约定的数据格式如下，其他内容可自行补充
|
||||
export default [{
|
||||
letter: 'A',
|
||||
data: [{
|
||||
text: '阿克苏机场',
|
||||
checked: false,
|
||||
//自定义属性，非约定
|
||||
value: '1001'
|
||||
}, {
|
||||
text: '阿拉山口机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '阿勒泰机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '阿里昆莎机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '安庆天柱山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '澳门国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'B',
|
||||
data: [{
|
||||
text: '保山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '包头机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北海福成机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北京南苑机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '北京首都国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'C',
|
||||
data: [{
|
||||
text: '长白山机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长春龙嘉国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '常德桃花源机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昌都邦达机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长沙黄花国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '长治王村机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '常州奔牛机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '成都双流国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '赤峰机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'D',
|
||||
data: [{
|
||||
text: '大理机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大连周水子国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大庆萨尔图机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '大同东王庄机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'E',
|
||||
data: [{
|
||||
text: '鄂尔多斯机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '恩施许家坪机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '二连浩特赛乌苏国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'F',
|
||||
data: [{
|
||||
text: '阜阳西关机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '福州长乐国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'G',
|
||||
data: [{
|
||||
text: '赣州黄金机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '格尔木机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '固原六盘山机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'H',
|
||||
data: [{
|
||||
text: '哈尔滨太平国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '哈密机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '海口美兰国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '海拉尔东山国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '邯郸机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '合肥骆岗国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'I',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'J',
|
||||
data: [{
|
||||
text: '济南遥墙国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '济宁曲阜机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '鸡西兴凯湖机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '佳木斯东郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '嘉峪关机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'K',
|
||||
data: [{
|
||||
text: '喀什机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '克拉玛依机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '库车龟兹机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '库尔勒机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昆明巫家坝国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'L',
|
||||
data: [{
|
||||
text: '拉萨贡嘎机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '兰州中川机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '丽江三义机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '连云港白塔埠机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '洛阳北郊机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'M',
|
||||
data: [{
|
||||
text: '满洲里西郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '绵阳南郊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '漠河古莲机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'N',
|
||||
data: [{
|
||||
text: '南昌昌北国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '南充高坪机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '南京禄口国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '宁波栎社国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'O',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'P',
|
||||
data: [{
|
||||
text: '普洱思茅机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Q',
|
||||
data: [{
|
||||
text: '齐齐哈尔三家子机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '秦皇岛山海关机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '青岛流亭国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'R',
|
||||
data: [{
|
||||
text: '日喀则和平机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'S',
|
||||
data: [{
|
||||
text: '三亚凤凰国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '汕头外砂机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '上海虹桥国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '深圳宝安国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'T',
|
||||
data: [{
|
||||
text: '塔城机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '太原武宿国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '天津滨海国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '通辽机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'U',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'V',
|
||||
data: []
|
||||
}, {
|
||||
letter: 'W',
|
||||
data: [{
|
||||
text: '万州五桥机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '潍坊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '威海大水泊机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '文山普者黑机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '温州永强国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '武汉天河国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '乌鲁木齐地窝堡国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'X',
|
||||
data: [{
|
||||
text: '西安咸阳国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '西双版纳嘎洒机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '厦门高崎国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '香港国际机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Y',
|
||||
data: [{
|
||||
text: '延安二十里堡机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '盐城机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '银川河东机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '榆林榆阳机场',
|
||||
checked: false
|
||||
}]
|
||||
}, {
|
||||
letter: 'Z',
|
||||
data: [{
|
||||
text: '湛江机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '昭通机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '郑州新郑国际机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '舟山朱家尖机场',
|
||||
checked: false
|
||||
}, {
|
||||
text: '珠海三灶机场',
|
||||
checked: false
|
||||
}]
|
||||
}]
|
||||
58
pages/component/nav/indexList-B/indexList-B.vue
Normal file
58
pages/component/nav/indexList-B/indexList-B.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<fui-index-list isSelect :listData="lists" @init="init" @click="itemClick">
|
||||
<fui-search-bar @search="search"></fui-search-bar>
|
||||
|
||||
<!--解构插槽使用，自定义内容 custom属性 设为true时生效-->
|
||||
<!-- <template v-slot:item="{ model, idx, index }">
|
||||
<fui-list-cell>
|
||||
{{model.text}}
|
||||
</fui-list-cell>
|
||||
</template> -->
|
||||
|
||||
<template v-slot:footer>
|
||||
<fui-loadmore v-if="!show"></fui-loadmore>
|
||||
<fui-divider text="已加载全部数据" v-if="show"></fui-divider>
|
||||
</template>
|
||||
</fui-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lists from './index.list.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: lists,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
// this.show = true;
|
||||
// }, 500)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.show = true;
|
||||
},
|
||||
search(e) {
|
||||
this.fui.toast(`搜索：${e.detail.value}`)
|
||||
//相关逻辑自行处理
|
||||
// ...
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
//相关逻辑自行处理，如限制选择数，选择后操作等
|
||||
let obj = this.lists[e.index].data[e.subIndex]
|
||||
this.$set(obj, 'checked', !obj.checked)
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
45
pages/component/nav/indexList/indexList.vue
Normal file
45
pages/component/nav/indexList/indexList.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 407 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">IndexList <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">IndexList 索引列表，用于通讯录、城市选择的索引选择器。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']" @click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="带选择操作" bold @click="href(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
let url = type == 1 ? '../indexList-A/indexList-A' : '../indexList-B/indexList-B'
|
||||
this.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
48
pages/component/nav/link/link.vue
Normal file
48
pages/component/nav/link/link.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Link<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Link 超链接，外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-link href="https://www.firstui.cn"></fui-link>
|
||||
<view class="fui-section__title">改变颜色/点击效果</view>
|
||||
<fui-link href="https://www.firstui.cn" color="#FFB703" highlight></fui-link>
|
||||
<view class="fui-section__title">加下划线</view>
|
||||
<fui-link href="https://www.firstui.cn" underline></fui-link>
|
||||
<view class="fui-section__title">自定义显示文本</view>
|
||||
<fui-link href="https://www.firstui.cn" text="FirstUI 组件库" underline></fui-link>
|
||||
<view class="fui-section__title">调整字体大小/加粗</view>
|
||||
<fui-link href="https://www.firstui.cn" size="32" font-weight="600"></fui-link>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
</style>
|
||||
81
pages/component/nav/navbar/navbar.vue
Normal file
81
pages/component/nav/navbar/navbar.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">NavBar<image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">NavBar 导航栏，用于提供页面的导航能力，若上方出现空白位置，则为状态栏高度。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-nav-bar title="标题" splitLine></fui-nav-bar>
|
||||
<view class="fui-section__title">样式调整，不含状态栏高度</view>
|
||||
<fui-nav-bar title="标题" :statusBar="false" background="linear-gradient(300deg, #6831FF, #465CFF)" color="#fff"></fui-nav-bar>
|
||||
<view class="fui-section__title">左右显示内容</view>
|
||||
<fui-nav-bar title="标题内容" @leftClick="leftClick" @rightClick="rightClick">
|
||||
<fui-icon name="arrowleft"></fui-icon>
|
||||
<template v-slot:right>
|
||||
<fui-icon name="plus"></fui-icon>
|
||||
</template>
|
||||
</fui-nav-bar>
|
||||
<view class="fui-section__title">自定义导航栏内容</view>
|
||||
<fui-nav-bar custom padding="12">
|
||||
<view class="fui-nav__city">深圳市</view>
|
||||
<view class="fui-search__box">请输入搜索关键词</view>
|
||||
</fui-nav-bar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
leftClick(e) {
|
||||
console.log('左侧按钮点击')
|
||||
},
|
||||
rightClick(e) {
|
||||
console.log('右侧按钮点击')
|
||||
},
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
.fui-wrap{
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-nav__city {
|
||||
font-size: 28rpx;
|
||||
padding-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fui-search__box {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #eee;
|
||||
border-radius: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
</style>
|
||||
116
pages/component/nav/noticeBar/noticeBar.vue
Normal file
116
pages/component/nav/noticeBar/noticeBar.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 140 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd" :class="{'fui-notice__pt':show}">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">NoticeBar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">NoticeBar 通告栏，一般用作系统提醒、活动提醒等通知。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">单行展示</view>
|
||||
<fui-notice-bar :padding="['0','32rpx']" :content="content" single></fui-notice-bar>
|
||||
<view class="fui-section__title">多行展示</view>
|
||||
<fui-notice-bar background="#fff8d5" color="#FFB703" :padding="['16rpx','32rpx']" :content="content">
|
||||
</fui-notice-bar>
|
||||
<view class="fui-section__title">文字滚动</view>
|
||||
<fui-notice-bar :content="content" scrollable></fui-notice-bar>
|
||||
<view class="fui-section__title">加图标/控制速度</view>
|
||||
<fui-notice-bar :content="content" :speed="200" scrollable activeMode="forwards" >
|
||||
<view class="fui-icon__box">
|
||||
<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
|
||||
</view>
|
||||
</fui-notice-bar>
|
||||
<view class="fui-section__title">查看更多</view>
|
||||
<fui-notice-bar :content="content" height="88" size="30" single background="#fff" color="#333">
|
||||
<view class="fui-icon__box">
|
||||
<fui-icon name="notice-fill" :size="40" color="#465CFF"></fui-icon>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-more__wrap">
|
||||
<text class="fui-more__text">查看更多</text>
|
||||
<fui-icon name="arrowright" :size="36" color="#7F7F7F"></fui-icon>
|
||||
</view>
|
||||
</template>
|
||||
</fui-notice-bar>
|
||||
</view>
|
||||
<!--顶部固定-->
|
||||
<view class="fui-notice__fixed" v-if="show">
|
||||
<fui-notice-bar :content="content" background="#fff8d5" color="#FF2B2B" scrollable>
|
||||
<view class="fui-icon__box">
|
||||
<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-more__wrap" @tap.stop="closeNotice">
|
||||
<fui-icon name="close" :size="40" color="#FF2B2B"></fui-icon>
|
||||
</view>
|
||||
</template>
|
||||
</fui-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
closeNotice() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__hd {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-icon__box {
|
||||
padding-left: 24rpx;
|
||||
padding-right: 12rpx;
|
||||
}
|
||||
|
||||
.fui-more__wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.fui-more__text {
|
||||
font-size: 26rpx;
|
||||
color: #7F7F7F;
|
||||
}
|
||||
|
||||
.fui-notice__fixed {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fui-notice__pt {
|
||||
padding-top: 124rpx;
|
||||
}
|
||||
</style>
|
||||
81
pages/component/nav/pagination/pagination.vue
Normal file
81
pages/component/nav/pagination/pagination.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 0 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Pagination</view>
|
||||
<view class="fui-page__desc">Pagination 分页器，当数据量过多时，使用分页分解数据。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-pagination :total="100" @change="change"></fui-pagination>
|
||||
<view class="fui-section__title">样式调整</view>
|
||||
<fui-pagination :total="100" color="#FFB703" background="transparent"
|
||||
currentColor="#FFB703"></fui-pagination>
|
||||
<view class="fui-section__title">自定义按钮内容</view>
|
||||
<fui-pagination :total="100" custom background="transparent">
|
||||
<template v-slot:prev>
|
||||
<fui-icon name="arrowleft"></fui-icon>
|
||||
</template>
|
||||
<template v-slot:next>
|
||||
<fui-icon name="arrowright"></fui-icon>
|
||||
</template>
|
||||
</fui-pagination>
|
||||
<view class="fui-section__title">页码展开</view>
|
||||
<fui-pagination :total="1000" :pageType="2"></fui-pagination>
|
||||
<view class="fui-section__title">页码展开/调整样式</view>
|
||||
<view class="fui-pageno__wrap">
|
||||
<fui-pagination :total="1000" custom :pageType="2" :width="62" background="#FFB703"
|
||||
pageBgColor="rgba(255, 183, 3, .1)" activeBgColor="#FFB703">
|
||||
<template v-slot:prev>
|
||||
<fui-icon :size="40" name="arrowleft" color="#fff"></fui-icon>
|
||||
</template>
|
||||
<template v-slot:next>
|
||||
<fui-icon :size="40" name="arrowright" color="#fff"></fui-icon>
|
||||
</template>
|
||||
</fui-pagination>
|
||||
</view>
|
||||
<view class="fui-section__title">页码展开/按钮宽度设为60</view>
|
||||
<fui-pagination :total="1000" custom :pageType="2" :width="60" background="#09BE4F"
|
||||
pageBgColor="rgba(9, 190, 79, .05)" activeBgColor="#09BE4F">
|
||||
<template v-slot:prev>
|
||||
<fui-icon :size="40" name="arrowleft" color="#fff"></fui-icon>
|
||||
</template>
|
||||
<template v-slot:next>
|
||||
<fui-icon :size="40" name="arrowright" color="#fff"></fui-icon>
|
||||
</template>
|
||||
</fui-pagination>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 96rpx;
|
||||
}
|
||||
|
||||
.fui-pageno__wrap {
|
||||
width: 100%;
|
||||
padding: 0 64rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
71
pages/component/nav/segmentedControl/segmentedControl.vue
Normal file
71
pages/component/nav/segmentedControl/segmentedControl.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18614 0 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">SegmentedControl</view>
|
||||
<view class="fui-page__desc">SegmentedControl 分段器。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-segmented-control :values="values" @click="itemClick"></fui-segmented-control>
|
||||
<view class="fui-section__title">自定义颜色</view>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#FF2B2B"></fui-segmented-control>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#FFB703"></fui-segmented-control>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#09BE4F"></fui-segmented-control>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#6831FF"></fui-segmented-control>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#333333"></fui-segmented-control>
|
||||
<view class="fui-section__title">text类型</view>
|
||||
<fui-segmented-control :values="values" marginTop="24" color="#333" activeColor="#FFB703" type="text" height="100" size="32"></fui-segmented-control>
|
||||
<view class="fui-section__title">不同数据格式</view>
|
||||
<fui-segmented-control :values="values2" @click="itemClick"></fui-segmented-control>
|
||||
<view class="fui-section__title">禁用状态</view>
|
||||
<fui-segmented-control :values="values2" disabled></fui-segmented-control>
|
||||
<view class="fui-section__title">默认选中</view>
|
||||
<fui-segmented-control :values="values2" :current="1"></fui-segmented-control>
|
||||
<view class="fui-section__title">改变圆角值</view>
|
||||
<fui-segmented-control :values="values2" :radius="100"></fui-segmented-control>
|
||||
<view class="fui-section__title">单项禁用</view>
|
||||
<fui-segmented-control :values="values3"></fui-segmented-control>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
values: ['segmented1', 'segmented2'],
|
||||
//name为约定属性，其他可自定义
|
||||
values2: [{
|
||||
id: 1,
|
||||
name: 'segmented1'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'segmented2'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'segmented3'
|
||||
}],
|
||||
values3: [{
|
||||
name: 'segmented1'
|
||||
}, {
|
||||
name: 'segmented2',
|
||||
disabled: true
|
||||
}, {
|
||||
name: 'segmented3'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
121
pages/component/nav/steps/steps.vue
Normal file
121
pages/component/nav/steps/steps.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 140 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Steps <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Steps 步骤条，显示一个任务的进度或者引导用户完成某个复杂任务。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-steps :items="items" :current="current"></fui-steps>
|
||||
<view class="fui-section__title">数字节点/线条加粗</view>
|
||||
<fui-steps :items="items2" :current="current" activeColor="#FF2B2B" lineBold></fui-steps>
|
||||
<view class="fui-section__title">不显示对号标识</view>
|
||||
<fui-steps :items="items2" :current="current" :isMark="false"></fui-steps>
|
||||
<view class="fui-section__title">带描述</view>
|
||||
<fui-steps :items="items3" :current="current"></fui-steps>
|
||||
<view class="fui-section__title">进行中（direction=row 有效）</view>
|
||||
<fui-steps :items="items3" :current="current" isWait activeColor="#FFB703" lineBold></fui-steps>
|
||||
<view class="fui-section__title">当前步骤进行中</view>
|
||||
<fui-steps :items="items3" :current="current2" processStatus="wait" process-color="#FFB703" isWait lineBold></fui-steps>
|
||||
<view class="fui-section__title">当前步骤失败</view>
|
||||
<fui-steps :items="items3" :current="current2" processStatus="fail" active-color="#09BE4F" process-color="#FF2B2B" isWait lineBold></fui-steps>
|
||||
<view class="fui-section__title">自定义图标</view>
|
||||
<fui-steps :items="items4" :current="current" radius="24rpx"></fui-steps>
|
||||
<view class="fui-section__title">纵向展示</view>
|
||||
<fui-steps :items="items2" :current="current" direction="column" :padding="['0','32rpx']"></fui-steps>
|
||||
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="Next step" bold :margin="['24rpx']"
|
||||
@click="stepChange"></fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
current2: 1,
|
||||
items: [{
|
||||
title: '注册'
|
||||
}, {
|
||||
title: '激活邮箱'
|
||||
}, {
|
||||
title: '注册完成'
|
||||
}],
|
||||
items2: [{
|
||||
title: '注册',
|
||||
text: '1'
|
||||
}, {
|
||||
title: '激活邮箱',
|
||||
text: '2'
|
||||
}, {
|
||||
title: '注册完成',
|
||||
text: '3'
|
||||
}],
|
||||
items3: [{
|
||||
title: 'STEP1',
|
||||
descr: '步骤一',
|
||||
text: 'F'
|
||||
}, {
|
||||
title: 'STEP2',
|
||||
descr: '步骤二',
|
||||
text: 'S'
|
||||
}, {
|
||||
title: 'STEP3',
|
||||
descr: '步骤三',
|
||||
text: 'T'
|
||||
}],
|
||||
items4: [{
|
||||
title: 'STEP1',
|
||||
descr: '步骤一',
|
||||
src: '/static/images/common/logo.png'
|
||||
}, {
|
||||
title: 'STEP2',
|
||||
descr: '步骤二',
|
||||
src: '/static/images/common/img_logo.png'
|
||||
}, {
|
||||
title: 'STEP3',
|
||||
descr: '步骤三',
|
||||
src: '/static/images/common/logo.png'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
stepChange() {
|
||||
//实际开发需根据步骤数据长度-1来得出最后一步（从 0 开始记数），此处为演示
|
||||
if (this.current === 2) {
|
||||
this.current = 0
|
||||
} else {
|
||||
this.current++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
</style>
|
||||
101
pages/component/nav/sticky-A/sticky-A.vue
Normal file
101
pages/component/nav/sticky-A/sticky-A.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 40 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Sticky <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Sticky 吸顶容器，用于将标题栏在滚动时固定到页面顶部。</view>
|
||||
</view>
|
||||
<view class="fui-section__title">放置根目录下</view>
|
||||
<fui-sticky :zIndex="1001" :scrollTop="scrollTop">
|
||||
<view class="fui-header">滑动页面查看效果</view>
|
||||
</fui-sticky>
|
||||
<view class="fui-seat__wrap">
|
||||
温馨提示：组件父元素不能使用overflow:hidden或者overflow:auto属性，且父元素的高度不能低于sticky元素的高度
|
||||
</view>
|
||||
<view class="fui-section__title">放置scroll-view内</view>
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<view style="height: 800px;position: relative;">
|
||||
<view class="fui-seat__wrap" style="height: 70px;">
|
||||
温馨提示：组件父元素不能使用overflow:hidden或者overflow:auto属性，且父元素的高度不能低于sticky元素的高度
|
||||
</view>
|
||||
<!--scroll-view 内组件不需要传值 scrollTop -->
|
||||
<fui-sticky>
|
||||
<view class="fui-header">滑动scroll-view查看效果</view>
|
||||
</fui-sticky>
|
||||
<view class="fui-seat__wrap" style="height: 40px;">
|
||||
注意：sticky组件如果放在scroll-view根目录下，当到scroll-view元素的底部时sticky效果会失效。
|
||||
</view>
|
||||
<view class="fui-seat__wrap">
|
||||
解决办法：如当scroll-view的高度为200px，但是scrollHeight为800px，在scroll-view中嵌套一个view就能顺利定位。</view>
|
||||
<view class="fui-footer">到达底部</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view style="height: 800px;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0
|
||||
}
|
||||
},
|
||||
// #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU
|
||||
onPageScroll(e) {
|
||||
// console.log(e)
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.fui-header {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #F8F8F8;
|
||||
color: #465CFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-seat__wrap,
|
||||
.fui-footer {
|
||||
height: 60px;
|
||||
font-size: 24rpx;
|
||||
color: #B2B2B2;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
255
pages/component/nav/sticky-B/sticky-B.vue
Normal file
255
pages/component/nav/sticky-B/sticky-B.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186140 725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Sticky <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Sticky 吸顶容器，用于将标题栏在滚动时固定到页面顶部。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">小鸡 🐤</view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看哪里有个小鸡呦</fui-list-cell>
|
||||
<fui-list-cell>你看哪里有个小鸡呦</fui-list-cell>
|
||||
<fui-list-cell>你看那里他有小鸡哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">母鸡 🐔</view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有母鸡哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有母鸡哟</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">公鸡 🐓</view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有公鸡哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有公鸡哟</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">火鸡 🦃 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有火鸡哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有火鸡哟</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">鸽子 🕊 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有鸽子哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有鸽子哟</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">猫咪 🐱 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有猫咪哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有猫咪哟</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">小狗 🐶 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有小狗哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有小狗哟</fui-list-cell>
|
||||
<fui-list-cell>小狗旺旺旺旺旺-wang-</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">山羊 🐐 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有山羊哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有山羊哟</fui-list-cell>
|
||||
<fui-list-cell>山羊咩-mie-</fui-list-cell>
|
||||
<fui-list-cell>小狗旺旺旺旺旺-wang-</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">绵羊 🐑 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有绵羊哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有绵羊哟</fui-list-cell>
|
||||
<fui-list-cell>绵羊咇-bie</fui-list-cell>
|
||||
<fui-list-cell>山羊咩-mie</fui-list-cell>
|
||||
<fui-list-cell>小狗旺旺旺旺旺-wang-</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">母牛 🐮 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有母牛哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有母牛哟</fui-list-cell>
|
||||
<fui-list-cell>母牛萌-meng-</fui-list-cell>
|
||||
<fui-list-cell>绵羊咇-bie</fui-list-cell>
|
||||
<fui-list-cell>山羊咩-mie</fui-list-cell>
|
||||
<fui-list-cell>小狗旺旺旺旺旺-wang-</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">公牛 🐂 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有公牛哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有公牛哟</fui-list-cell>
|
||||
<fui-list-cell>公牛呣-mu-</fui-list-cell>
|
||||
<fui-list-cell>母牛萌-meng-</fui-list-cell>
|
||||
<fui-list-cell>绵羊咇-bie</fui-list-cell>
|
||||
<fui-list-cell>山羊咩-mie</fui-list-cell>
|
||||
<fui-list-cell>小狗旺旺旺旺旺-wang-</fui-list-cell>
|
||||
<fui-list-cell>猫咪喵喵喵喵喵-miao-</fui-list-cell>
|
||||
<fui-list-cell>鸽子图噜噜噜噜-lu-</fui-list-cell>
|
||||
<fui-list-cell>火鸡嘟嘟嘟嘟嘟-du-</fui-list-cell>
|
||||
<fui-list-cell>公鸡喔喔喔喔喔-wo-</fui-list-cell>
|
||||
<fui-list-cell>母鸡咯咯咯咯咯咯-go-</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
<fui-sticky range>
|
||||
<view class="fui-title">拖拉机 🚜 </view>
|
||||
<template v-slot:content>
|
||||
<fui-list-cell>你看那里又有拖拉机哟</fui-list-cell>
|
||||
<fui-list-cell>你看那里又有拖拉机哟</fui-list-cell>
|
||||
<fui-list-cell>拖拉机嗡-weng-</fui-list-cell>
|
||||
<fui-list-cell>拖拉机嗡-weng-</fui-list-cell>
|
||||
<fui-list-cell>拖拉机嗡-weng-</fui-list-cell>
|
||||
<fui-list-cell>小鸡被撞 喔 啊喔</fui-list-cell>
|
||||
</template>
|
||||
</fui-sticky>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
// #ifdef MP-WEIXIN || APP-PLUS
|
||||
const manager = uni.getBackgroundAudioManager();
|
||||
if (manager) {
|
||||
manager.title = '小鸡哔哔';
|
||||
manager.singer = '洛天依';
|
||||
manager.coverImgUrl =
|
||||
'https://res.firstui.cn/template/component/music/cover.jpeg';
|
||||
manager.src =
|
||||
'https://res.firstui.cn/template/component/music/chicken_beep.mp3';
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-title {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
background: #e1e1e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
46
pages/component/nav/sticky/sticky.vue
Normal file
46
pages/component/nav/sticky/sticky.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 0725 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Sticky <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Sticky 吸顶容器，用于将标题栏在滚动时固定到页面顶部。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="sticky(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="指定内容范围" bold @click="sticky(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
sticky(type) {
|
||||
let url = type === 1 ? '../sticky-A/sticky-A' : '../sticky-B/sticky-B'
|
||||
this.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
181
pages/component/nav/tabbar-A/tabbar-A.vue
Normal file
181
pages/component/nav/tabbar-A/tabbar-A.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Tabbar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Tabbar 标签栏，用于在不同功能模块之间进行切换，小图标建议尺寸84*84。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-tabbar :isFixed="false" :tabBar="tabBar2" :current="current" @click="itemClick"></fui-tabbar>
|
||||
<view class="fui-section__title">纯文本</view>
|
||||
<fui-tabbar :isFixed="false" background="rgba(0,0,0,.5)" color="rgba(255,255,255,.7)" selectedColor="#fff"
|
||||
size="32" font-weight="500" :tabBar="tabBar" :current="current" @click="itemClick"></fui-tabbar>
|
||||
<view class="fui-section__title">纯图标</view>
|
||||
<fui-tabbar :isFixed="false" :tabBar="tabBar3" :current="current" @click="itemClick"></fui-tabbar>
|
||||
<view class="fui-section__title">中间使用图标</view>
|
||||
<fui-tabbar :isFixed="false" :tabBar="tabBar4" :current="current2" @click="itemClick2"></fui-tabbar>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<!-- Nvue暂不支持 -->
|
||||
<view class="fui-section__title">中间大图标（凸出）</view>
|
||||
<fui-tabbar :isFixed="false" :tabBar="tabBar5" :current="current2" @click="itemClick2"></fui-tabbar>
|
||||
<!-- #endif -->
|
||||
<view class="fui-section__title">带角标</view>
|
||||
<fui-tabbar :isFixed="false" :tabBar="tabBar6" :current="current" @click="itemClick"></fui-tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabBar: ["首页", "朋友", "消息", "我"],
|
||||
current: 0,
|
||||
current2: 0,
|
||||
tabBar2: [{
|
||||
text: "组件",
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "布局",
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "模板",
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
tabBar3: [{
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
tabBar4: [{
|
||||
text: "组件",
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "布局",
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/images/common/icon_plus_3x.png",
|
||||
midButton: true,
|
||||
width: 96,
|
||||
height: 96
|
||||
},
|
||||
{
|
||||
text: "模板",
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
tabBar5: [{
|
||||
text: "组件",
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "布局",
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "发布",
|
||||
iconPath: "/static/images/common/icon_plus_3x.png",
|
||||
midButton: true,
|
||||
width: 126,
|
||||
height: 126,
|
||||
bottom: 26
|
||||
},
|
||||
{
|
||||
text: "模板",
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
tabBar6: [{
|
||||
text: "首页",
|
||||
iconPath: "/static/images/component/tabbar/icon_home.png",
|
||||
selectedIconPath: "/static/images/component/tabbar/icon_home_fill.png",
|
||||
badge: 1
|
||||
},
|
||||
{
|
||||
text: "分类",
|
||||
iconPath: "/static/images/component/tabbar/icon_classify.png",
|
||||
selectedIconPath: "/static/images/component/tabbar/icon_classify_fill.png",
|
||||
badge: 2,
|
||||
dot: true
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/component/tabbar/icon_my.png",
|
||||
selectedIconPath: "/static/images/component/tabbar/icon_my_fill.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
this.current = e.index
|
||||
},
|
||||
itemClick2(e) {
|
||||
console.log(e)
|
||||
if (e.index == 2) {
|
||||
this.fui.toast('您点击了大图标~')
|
||||
} else {
|
||||
this.current2 = e.index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
159
pages/component/nav/tabbar-B/tabbar-B.nvue
Normal file
159
pages/component/nav/tabbar-B/tabbar-B.nvue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<swiper class="fui-swiper__wrap" :current="current" :duration="300" @change="change">
|
||||
<swiper-item class="fui-swiper__item" v-for="(tab, index) in tabBar" :key="index">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="fui-scroll__wrap" enableBackToTop="true" scroll-y loadmoreoffset="15">
|
||||
<cell>
|
||||
<text class="fui-text">{{texts[index]}}</text>
|
||||
</cell>
|
||||
<cell>
|
||||
<cell>
|
||||
<view class="fui-tabbar__h" :style="{height:height+'px'}"> </view>
|
||||
</cell>
|
||||
</cell>
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<scroll-view scroll-y class="fui-scroll__wrap">
|
||||
<view class="fui-text">{{texts[index]}}</view>
|
||||
<view class="fui-tabbar__h" :style="{height:height+'px'}"> </view>
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<fui-tabbar :tabBar="tabBar" :current="current" @init="init" @click="itemClick"></fui-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
tabBar: [{
|
||||
text: "组件",
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "布局",
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "模板",
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
height: 0,
|
||||
texts: [
|
||||
'Tabbar 标签栏，用于在不同功能模块之间进行切换，小图标建议尺寸84*84。',
|
||||
'该使用方式在非Nvue端只适用于简单的页面，过于复杂的页面建议仅App-Nvue端使用。',
|
||||
'非必要情况下建议使用原生tabbar。',
|
||||
'由于Nvue端Android下内容超出会强制隐藏，所以App-Nvue暂不支持中间凸起图标，可使用原生tabbar配置。'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(e) {
|
||||
//处理tabbar高度，避免内容被tabbar遮住
|
||||
this.height = e.height
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
//这里可以做其他验证处理，比如登录等
|
||||
//....
|
||||
//验证通过执行以下逻辑
|
||||
this.current = e.index
|
||||
this.setTitle(e.index)
|
||||
},
|
||||
change(e) {
|
||||
//禁止左右滑动
|
||||
if (e.detail.source == 'touch') {
|
||||
let index = e.target.current || e.detail.current;
|
||||
this.current = index;
|
||||
this.setTitle(index)
|
||||
}
|
||||
},
|
||||
setTitle(index) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: ['组件', '布局', '模板', '我的'][index]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-wrap {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-swiper__wrap {
|
||||
/* #ifdef APP-NVUE */
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.fui-swiper__item {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fui-scroll__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
/* #ifndef MP-ALIPAY */
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-tabbar__h {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.fui-text {
|
||||
font-size: 28rpx;
|
||||
color: #B2B2B2;
|
||||
padding: 32rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
61
pages/component/nav/tabbar-C/pageA.vue
Normal file
61
pages/component/nav/tabbar-C/pageA.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 407254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-header">
|
||||
<view class="fui-title__text">PageA：组件</view>
|
||||
<view class="fui-desc__text">Tabbar 标签栏，用于在不同功能模块之间进行切换，小图标建议尺寸84*84。</view>
|
||||
</view>
|
||||
<view class="fui-body">
|
||||
|
||||
<fui-divider text="往下滑动~" backgroundColor="#fff"></fui-divider>
|
||||
</view>
|
||||
<view class="fui-footer">到达底部</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pageA",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-header {
|
||||
width: 100%;
|
||||
padding: 52rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-body {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
padding:0 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.fui-title__text {
|
||||
text-align: left;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fui-desc__text {
|
||||
margin-top: 8rpx;
|
||||
color: #B2B2B2;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
}
|
||||
.fui-footer{
|
||||
padding: 64rpx 32rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
52
pages/component/nav/tabbar-C/pageB.vue
Normal file
52
pages/component/nav/tabbar-C/pageB.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-header">
|
||||
<view class="fui-title__text">PageB：布局</view>
|
||||
<view class="fui-desc__text">非必要情况下建议使用原生配置tababr。</view>
|
||||
</view>
|
||||
<view class="fui-body">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pageB",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-header {
|
||||
width: 100%;
|
||||
padding: 52rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-body {
|
||||
width: 100%;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
|
||||
.fui-title__text {
|
||||
text-align: left;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fui-desc__text {
|
||||
margin-top: 8rpx;
|
||||
color: #B2B2B2;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
52
pages/component/nav/tabbar-C/pageC.vue
Normal file
52
pages/component/nav/tabbar-C/pageC.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-header">
|
||||
<view class="fui-title__text">PageC：模板</view>
|
||||
<view class="fui-desc__text">由于Nvue端Android下内容超出会强制隐藏，所以App-Nvue暂不支持中间凸起图标，可使用原生tabbar配置。</view>
|
||||
</view>
|
||||
<view class="fui-body">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "pageC",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-header {
|
||||
width: 100%;
|
||||
padding: 52rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-body {
|
||||
width: 100%;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
|
||||
.fui-title__text {
|
||||
text-align: left;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fui-desc__text {
|
||||
margin-top: 8rpx;
|
||||
color: #B2B2B2;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
98
pages/component/nav/tabbar-C/pageD.vue
Normal file
98
pages/component/nav/tabbar-C/pageD.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-logo__box">
|
||||
<image src="/static/images/common/img_logo.png" class="fui-logo" mode="widthFix"></image>
|
||||
<view class="fui-title">First UI</view>
|
||||
<view class="fui-version">Version {{version}}</view>
|
||||
</view>
|
||||
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-desc">
|
||||
<text class="fui-mr">First UI</text> 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。
|
||||
</view>
|
||||
<fui-list-cell topBorder arrow @click="getLink">
|
||||
去STAR
|
||||
</fui-list-cell>
|
||||
<fui-list-cell arrow @click="href('/pages/my/updated/updated')">
|
||||
功能介绍
|
||||
</fui-list-cell>
|
||||
<fui-list-cell bottomLeft="0" arrow @click="href('/pages/my/vip/vip')">
|
||||
会员介绍
|
||||
</fui-list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import $fui from '@/components/firstui/fui-clipboard';
|
||||
export default {
|
||||
computed: mapState(['version','status']),
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLink(e) {
|
||||
// #ifdef MP-BAIDU
|
||||
if(this.status==0){
|
||||
this.fui.toast('暂不支持此功能~')
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
$fui.getClipboardData('https://github.com/FirstUI/FirstUI', res => {
|
||||
this.fui.toast('GitHub地址复制成功');
|
||||
}, e);
|
||||
},
|
||||
href(page){
|
||||
this.fui.href(page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fui-logo__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-top: 64rpx;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 36rpx;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.fui-version {
|
||||
padding-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.fui-desc {
|
||||
font-size: 28rpx;
|
||||
line-height: 56rpx;
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 64rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fui-mr {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
86
pages/component/nav/tabbar-C/tabbar-C.vue
Normal file
86
pages/component/nav/tabbar-C/tabbar-C.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__wrap" :style="{paddingBottom:height+'px'}">
|
||||
<page-a v-if="current===0"></page-a>
|
||||
<page-b v-if="current===1"></page-b>
|
||||
<page-c v-if="current===2"></page-c>
|
||||
<page-d v-if="current===3"></page-d>
|
||||
</view>
|
||||
<fui-tabbar :tabBar="tabBar" :current="current" @init="init" @click="itemClick"></fui-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pageA from './pageA.vue'
|
||||
import pageB from './pageB.vue'
|
||||
import pageC from './pageC.vue'
|
||||
import pageD from './pageD.vue'
|
||||
export default {
|
||||
components: {
|
||||
pageA,
|
||||
pageB,
|
||||
pageC,
|
||||
pageD
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
tabBar: [{
|
||||
text: "组件",
|
||||
iconPath: "/static/images/tabbar/assembly_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/assembly_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "布局",
|
||||
iconPath: "/static/images/tabbar/layout_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/layout_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "模板",
|
||||
iconPath: "/static/images/tabbar/mod_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/mod_selected_3x.png"
|
||||
},
|
||||
{
|
||||
text: "我的",
|
||||
iconPath: "/static/images/tabbar/my_default_3x.png",
|
||||
selectedIconPath: "/static/images/tabbar/my_selected_3x.png"
|
||||
}
|
||||
],
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(e) {
|
||||
//处理tabbar高度，避免内容被tabbar遮住
|
||||
this.height = e.height
|
||||
},
|
||||
itemClick(e) {
|
||||
console.log(e)
|
||||
//这里可以做其他验证处理，比如登录等
|
||||
//....
|
||||
//验证通过执行以下逻辑
|
||||
this.current = e.index
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title:['组件','布局','模板','我的'][e.index]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
53
pages/component/nav/tabbar/tabbar.vue
Normal file
53
pages/component/nav/tabbar/tabbar.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 407 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Tabbar <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Tabbar 标签栏，用于在不同功能模块之间进行切换。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础演示" bold :margin="['24rpx','0','0']"
|
||||
@click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="使用案例一" bold :margin="['24rpx']"
|
||||
@click="href(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="使用案例二" bold @click="href(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
let url = '../tabbar-A/tabbar-A';
|
||||
if (type !== 1) {
|
||||
url = type == 2 ? '../tabbar-B/tabbar-B' : '../tabbar-C/tabbar-C'
|
||||
}
|
||||
|
||||
this.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
74
pages/component/nav/tabs/tabs.vue
Normal file
74
pages/component/nav/tabs/tabs.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8614 07 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">Tabs</view>
|
||||
<view class="fui-page__desc">Tabs 标签页，分隔内容上有关联但属于不同类别的数据集合。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">基础使用</view>
|
||||
<fui-tabs :tabs="tabs" @change="change"></fui-tabs>
|
||||
<view class="fui-section__title">滑块居中显示</view>
|
||||
<fui-tabs :tabs="tabs" center @change="change"></fui-tabs>
|
||||
<view class="fui-section__title">改变颜色</view>
|
||||
<fui-tabs :tabs="tabs" selectedColor="#FFB703" sliderBackground="#FFB703"></fui-tabs>
|
||||
<view class="fui-section__title">滑块与内容同宽</view>
|
||||
<fui-tabs :tabs="tabs" :short="false"></fui-tabs>
|
||||
<view class="fui-section__title">超出一屏，禁用（标签八）
|
||||
</view>
|
||||
<!--nvue端，超出一屏滚动时scroll和alignLeft必须同为true-->
|
||||
<fui-tabs :tabs="tabs2" isDot scroll alignLeft></fui-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//数据格式一
|
||||
tabs: ['热门推荐', '新时代', '懂球帝'],
|
||||
//数据格式二：name（必选）、badge（可选）、disabled（可选）为约定属性，其他属性可自行定义
|
||||
tabs2: [{
|
||||
name: '标签一'
|
||||
}, {
|
||||
name: '标签二'
|
||||
}, {
|
||||
name: '标签三',
|
||||
badge: 1
|
||||
}, {
|
||||
name: '标签四'
|
||||
}, {
|
||||
name: '标签五'
|
||||
}, {
|
||||
name: '标签六'
|
||||
}, {
|
||||
name: '标签七'
|
||||
}, {
|
||||
name: '标签八',
|
||||
disabled: true
|
||||
}, {
|
||||
name: '标签九'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
</style>
|
||||
245
pages/component/nav/timeAxis/timeAxis.vue
Normal file
245
pages/component/nav/timeAxis/timeAxis.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 072 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">TimeAxis <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">TimeAxis 时间轴，用于展现时间流信息。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">右侧展示</view>
|
||||
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
|
||||
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
|
||||
v-for="(item,index) in processData" :key="index">
|
||||
<view class="fui-node" :style="{borderColor:item.activeColor}">
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-process__node" :class="{'fui-node__pb':index!==processData.length-1}">
|
||||
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
|
||||
</view>
|
||||
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
|
||||
<view class="fui-time">{{item.time}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
</fui-timeaxis>
|
||||
<view class="fui-section__title">左右展示</view>
|
||||
<fui-timeaxis leftWidth="200" background="#fff" :padding="['32rpx','16rpx']">
|
||||
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
|
||||
v-for="(item,index) in processData" :key="index">
|
||||
<view class="fui-node" :style="{borderColor:item.activeColor}">
|
||||
</view>
|
||||
<template v-slot:left>
|
||||
<view class="fui-time__left">{{item.time}}</view>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<view class="fui-process__node" :class="{'fui-node__pbtm':index!==processData.length-1}">
|
||||
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
|
||||
</view>
|
||||
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
</fui-timeaxis>
|
||||
<view class="fui-section__title">节点设置icon</view>
|
||||
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
|
||||
<fui-timeaxis-node>
|
||||
<view class="fui-node__box" style="background: #FF2B2B;">
|
||||
<fui-icon name="check" :size="28" color="#fff"></fui-icon>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder">自定义内容</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
<fui-timeaxis-node>
|
||||
<view class="fui-node__box" style="background: #09BE4F;">
|
||||
<fui-icon name="face" :size="28" color="#fff"></fui-icon>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder">自定义内容</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
<fui-timeaxis-node>
|
||||
<view class="fui-node__box" style="background: #465CFF;">
|
||||
<fui-icon name="my-fill" :size="28" color="#fff"></fui-icon>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder">自定义内容</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
<fui-timeaxis-node>
|
||||
<view class="fui-node__sm"></view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder">自定义内容</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
<fui-timeaxis-node>
|
||||
<view class="fui-node"></view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder" style="height: 400rpx;">First UI</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
<fui-timeaxis-node :lined="false">
|
||||
<view class="fui-node"></view>
|
||||
<template v-slot:right>
|
||||
<view class="fui-custom__wrap">
|
||||
<view class="fui-custom__innder">
|
||||
<image src="/static/images/common/logo.png" class="fui-logo"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fui-timeaxis-node>
|
||||
</fui-timeaxis>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
processData: [{
|
||||
title: '入场',
|
||||
time: '07:00',
|
||||
activeColor: '#465CFF'
|
||||
}, {
|
||||
title: '主场演讲',
|
||||
time: '08:00',
|
||||
descr: '马云（阿里巴巴）',
|
||||
activeColor: '#465CFF'
|
||||
}, {
|
||||
title: '世界互联经济',
|
||||
time: '08:30',
|
||||
descr: '马云（阿里巴巴）',
|
||||
activeColor: '#465CFF'
|
||||
}, {
|
||||
title: '打造自己的互联帝国',
|
||||
time: '09:30',
|
||||
descr: '马化腾（腾讯）',
|
||||
activeColor: '#FFB703'
|
||||
}, {
|
||||
title: '散场',
|
||||
time: '11:00',
|
||||
descr: '请带走垃圾，有序散场。'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-wrap {
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.fui-node {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-process__node {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.fui-node__pb {
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 34rpx;
|
||||
line-height: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
font-size: 28rpx;
|
||||
padding-top: 12rpx;
|
||||
color: #7F7F7F;
|
||||
}
|
||||
|
||||
.fui-time {
|
||||
font-size: 24rpx;
|
||||
color: #B2B2B2;
|
||||
padding-top: 12rpx;
|
||||
}
|
||||
|
||||
.fui-time__left {
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.fui-node__pbtm {
|
||||
padding-bottom: 88rpx;
|
||||
}
|
||||
|
||||
.fui-custom__wrap {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-custom__innder {
|
||||
height: 200rpx;
|
||||
border-radius: 0 16rpx 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F1F4FA;
|
||||
color: #FFB703;
|
||||
}
|
||||
|
||||
.fui-logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.fui-node__box {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fui-node__sm {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
176
pages/component/nav/topPopup/topPopup.vue
Normal file
176
pages/component/nav/topPopup/topPopup.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1861 40 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title">TopPopup</view>
|
||||
<view class="fui-page__desc">TopPopup 顶部弹出层，从顶部弹出的浮层，引导用户进行相关操作。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="基础使用" bold :margin="['24rpx']"
|
||||
@click="showPopup(1)"></fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="案例一" bold @click="showPopup(2)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="内容可滚动" :margin="['24rpx']" bold
|
||||
@click="showPopup(3)">
|
||||
</fui-button>
|
||||
</view>
|
||||
|
||||
<fui-top-popup :show="show" @close="closePopup(1)">
|
||||
<view class="fui-custom__wrap">
|
||||
这是自定义内容区
|
||||
</view>
|
||||
</fui-top-popup>
|
||||
|
||||
<!--案例一-->
|
||||
<fui-top-popup :show="show2" :maskClosable="false">
|
||||
<view class="fui-popup__container">
|
||||
<text class="fui-title">测试标题一</text>
|
||||
<text class="fui-sub__title">测试标题一的副标题</text>
|
||||
<text class="fui-descr">辅助描述内容，可根据实际需要安排</text>
|
||||
<text class="fui-sub__descr">辅助提示内容，可根据实际需要安排</text>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" width="240rpx" height="80rpx" text="辅助操作" :margin="['0','16rpx']">
|
||||
</fui-button>
|
||||
<fui-button width="240rpx" height="80rpx" text="主操作" :margin="['0','16rpx']"></fui-button>
|
||||
</view>
|
||||
|
||||
<view class="fui-icon__close" @tap="closePopup(2)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-top-popup>
|
||||
|
||||
<fui-top-popup :show="show3" @close="closePopup(3)">
|
||||
<view class="fui-scroll__wrap">
|
||||
<view class="fui-title fui-title__pb">测试标题二</view>
|
||||
<scroll-view scroll-y class="fui-scroll__view">
|
||||
<fui-list-cell v-for="(item,index) in itemList" :key="index">item{{index+1}}</fui-list-cell>
|
||||
</scroll-view>
|
||||
<view class="fui-icon__close" @tap="closePopup(3)">
|
||||
<fui-icon name="close" :size="48"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
</fui-top-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
itemList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = true
|
||||
} else if (type === 2) {
|
||||
this.show2 = true
|
||||
} else {
|
||||
this.show3 = true
|
||||
}
|
||||
},
|
||||
closePopup(type) {
|
||||
if (type === 1) {
|
||||
this.show = false
|
||||
} else if (type === 2) {
|
||||
this.show2 = false
|
||||
} else {
|
||||
this.show3 = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fui-custom__wrap {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 案例一 start*/
|
||||
.fui-popup__container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fui-sub__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #7F7F7F;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
font-weight: bold;
|
||||
padding-top: 64rpx;
|
||||
}
|
||||
|
||||
.fui-sub__descr {
|
||||
font-size: 26rpx;
|
||||
color: #B2B2B2;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.fui-btn__box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-icon__close {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
/* 案例一 end*/
|
||||
.fui-scroll__wrap {
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-scroll__view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
|
||||
.fui-title__pb {
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
</style>
|
||||
128
pages/component/nav/vtabs-A/vtabs-A.vue
Normal file
128
pages/component/nav/vtabs-A/vtabs-A.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 14 0 72 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<fui-vtabs :vtabs="vtabs" :activeTab="activeTab" ref="vtabs" @click="onTabClick" @change="onChange">
|
||||
<!--注意：联动时，tabIndex属性为必传参数-->
|
||||
<fui-vtabs-content v-for="(item,index) in vtabs" :key="index" :tabIndex="index">
|
||||
<view class="fui-vtabs-content__item" :style="{paddingBottom:vtabs.length-1===index?'800px':'0'}">
|
||||
<view class="fui-content--box">
|
||||
<text class="fui-title">{{item.title || item.name}}</text>
|
||||
<image class="fui-img" :src="resUrl+item.img" mode="widthFix"></image>
|
||||
<text class="fui-descr">{{item.descr}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-vtabs-content>
|
||||
</fui-vtabs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
vtabs: [],
|
||||
activeTab: 0,
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//内容可与tabs分开
|
||||
const tabs = [{
|
||||
name: 'First UI',
|
||||
icon: '/static/images/common/logo.png',
|
||||
title: 'FirstUI组件库',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
|
||||
},
|
||||
{
|
||||
name: '快速上手',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: '使用 First UI前，请确保你已经学习并熟练使用过 uni-app 或者 微信小程序 。文档详见：https://doc.firstui.cn/docs/started.html。'
|
||||
},
|
||||
{
|
||||
name: '更新日志',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: 'First UI 严格遵循 Semantic Versioning 2.0.0语义化版本规范。更新日志详见：https://doc.firstui.cn/docs/log.html。',
|
||||
badge: 1
|
||||
},
|
||||
{
|
||||
name: '升级指南',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: 'First UI 升级指南，当含有破坏性更新，不向下兼容的版本升级时，会在这里写入相关的升级指导。'
|
||||
},
|
||||
{
|
||||
name: '设计规范',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: '为了约束和成就更多优秀的产品，打造优质的体验，我们拟定了一些UI界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在First UI生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与First UI的共赢。'
|
||||
},
|
||||
{
|
||||
name: '自定义主题',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: 'First UI 默认提供了一套主题，并使用 CSS 变量 来实现定制主题，链接中的内容可以帮助你对 CSS 变量 概念有基本的认识，避免许多不必要的困扰。文档详见：https://doc.firstui.cn/docs/theme.html。'
|
||||
},
|
||||
{
|
||||
name: 'FAQ',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: '常见问题解答，使用前请先仔细阅读FAQ内容，了解常见问题，避免在后续使用过程中花费更多时间。详见：https://doc.firstui.cn/docs/FAQ.html。'
|
||||
}
|
||||
]
|
||||
|
||||
this.vtabs = tabs
|
||||
//数据加载完成后，调用方法重新计算内容高度，防止联动错乱
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.vtabs.reset()
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onTabClick(e) {
|
||||
const index = e.index
|
||||
// console.log('tabClick', index)
|
||||
},
|
||||
onChange(e) {
|
||||
const index = e.index
|
||||
// console.log('change', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-vtabs-content__item {
|
||||
width: 100%;
|
||||
/* padding: 0 20rpx; */
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-img {
|
||||
width: 100%;
|
||||
height: 268rpx;
|
||||
display: block;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.fui-content--box {
|
||||
width: 100%;
|
||||
padding: 30rpx 24rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
120
pages/component/nav/vtabs-B/vtabs-B.vue
Normal file
120
pages/component/nav/vtabs-B/vtabs-B.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<fui-vtabs :vtabs="vtabs" :activeTab="activeTab" :linkage="false" @click="onTabClick">
|
||||
<view class="fui-vtabs-content__item">
|
||||
<view class="fui-content--box">
|
||||
<text class="fui-title">{{content.title}}</text>
|
||||
<image class="fui-img" :src="resUrl+content.img" mode="widthFix"></image>
|
||||
<view v-if="content.title==='FAQ'">
|
||||
<image class="fui-img" :src="resUrl+item.img" mode="widthFix" v-for="(item,index) in contents"
|
||||
:key="index"></image>
|
||||
</view>
|
||||
<text class="fui-descr">{{content.descr}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-vtabs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
vtabs: [],
|
||||
contents: [],
|
||||
content: {},
|
||||
resUrl: this.fui.resUrl()
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//内容可与tabs分开
|
||||
this.vtabs = ['First UI', '快速上手', '更新日志', '升级指南', '设计规范', '自定义主题', 'FAQ']
|
||||
const contents = [{
|
||||
title: 'FirstUI组件库',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
|
||||
},
|
||||
{
|
||||
title: '快速上手',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: '使用 First UI前，请确保你已经学习并熟练使用过 uni-app 或者 微信小程序 。文档详见：https://doc.firstui.cn/docs/started.html。'
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: 'First UI 严格遵循 Semantic Versioning 2.0.0语义化版本规范。更新日志详见：https://doc.firstui.cn/docs/log.html。'
|
||||
},
|
||||
{
|
||||
title: '升级指南',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: 'First UI 升级指南，当含有破坏性更新，不向下兼容的版本升级时，会在这里写入相关的升级指导。'
|
||||
},
|
||||
{
|
||||
title: '设计规范',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: '为了约束和成就更多优秀的产品，打造优质的体验，我们拟定了一些UI界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在First UI生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与First UI的共赢。'
|
||||
},
|
||||
{
|
||||
title: '自定义主题',
|
||||
img: '/cooperate/dark/img_banner_3x.png',
|
||||
descr: 'First UI 默认提供了一套主题，并使用 CSS 变量 来实现定制主题，链接中的内容可以帮助你对 CSS 变量 概念有基本的认识，避免许多不必要的困扰。文档详见：https://doc.firstui.cn/docs/theme.html。'
|
||||
},
|
||||
{
|
||||
title: 'FAQ',
|
||||
img: '/cooperate/light/img_banner_3x.png',
|
||||
descr: '常见问题解答，使用前请先仔细阅读FAQ内容，了解常见问题，避免在后续使用过程中花费更多时间。详见：https://doc.firstui.cn/docs/FAQ.html。'
|
||||
}
|
||||
]
|
||||
|
||||
this.contents = contents
|
||||
this.content = contents[this.activeTab]
|
||||
},
|
||||
methods: {
|
||||
onTabClick(e) {
|
||||
const index = e.index
|
||||
this.content = this.contents[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-vtabs-content__item {
|
||||
width: 100%;
|
||||
/* padding: 0 20rpx; */
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-img {
|
||||
width: 100%;
|
||||
height: 268rpx;
|
||||
display: block;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.fui-content--box {
|
||||
width: 100%;
|
||||
padding: 30rpx 24rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fui-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-descr {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
50
pages/component/nav/vtabs/vtabs.vue
Normal file
50
pages/component/nav/vtabs/vtabs.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">Vtabs <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">Vtabs 纵向选项卡，用于让用户在不同的视图中进行切换。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<fui-button type="gray" btn-size="medium" text="选项卡-联动" bold :margin="['24rpx']"
|
||||
@click="href(1)">
|
||||
</fui-button>
|
||||
<fui-button type="gray" btn-size="medium" text="选项卡-不联动" bold @click="href(2)">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
href(type) {
|
||||
let url = '../vtabs-A/vtabs-A';
|
||||
if (type !== 1) {
|
||||
url = '../vtabs-B/vtabs-B'
|
||||
}
|
||||
|
||||
this.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-page__bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user