Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 4f347962 编写于 作者: W wanganxp
浏览文件
操作

- 添加了loadFontFace测试例 

- 补充了一些模板的需求导航
- 去掉了css里字体图标的需求
- 改了滚动搜索条的返回写法
上级 3c3c6f23
隐藏空白更改
内联 并排
Showing with 168 addition and 152 deletion
pages/CSS/background/background-image.uvue
浏览文件 @ 4f347962
<template>
<view style="flex-grow: 1;">
<view>
<text>不支持背景图片，仅支持linear-gradient方法</text>
<text>background-image: linear-gradient(to right, red, yellow)</text>
<view class="common" style="background-image: linear-gradient(to right, red, yellow);"></view>
</view>
......
pages/CSS/text/font-family.uvue
浏览文件 @ 4f347962
......@@ -3,7 +3,7 @@
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="font-family: monospace;">font-family: monospace</text>
<text class="common" style="font-family: cursive;">font-family: cursive</text>
<text class="common" style="font-family: AlimamaDaoLiTi;">font-family: 阿里妈妈刀隶体</text>
<text class="common" style="font-family: AlimamaDaoLiTi;">font-family: 阿里妈妈刀隶体（网络字体下载后生效）</text>
</view>
</view>
</template>
......
pages/tabBar/API.uvue
浏览文件 @ 4f347962
......@@ -301,6 +301,11 @@
name: "保存媒体到本地",
url: "save-media",
}, */
{
name: "动态加载字体",
url: "load-font-face",
enable:false
},
] as Page[],
},
{
......
pages/tabBar/CSS.uvue
浏览文件 @ 4f347962
......@@ -267,17 +267,6 @@
url: 'pages/CSS/transform/transform'
}
] as Page[]
}, {
id: 'iconfont',
name: '字体图标',
open: false,
pages: [
{
name: '字体图标',
enable: false,
url: 'pages/CSS/iconfont/iconfont'
},
] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
......
pages/tabBar/template.uvue
浏览文件 @ 4f347962
<template>
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/templateIndex.png"></image>
</view>
<view class="uni-hello-text">
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
<u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'"
:inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon">
</image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/templateIndex.png"></image>
</view>
<view class="uni-hello-text">
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
<u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'"
:inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon">
</image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
type Page = {
name : string,
enable ?: boolean,
url : string
}
type Page = {
name : string,
enable ?: boolean,
url : string
}
type ListItem = {
id : string,
name : string,
open : boolean,
pages : Page[],
url ?: string,
enable ?: boolean
}
export default {
data() {
return {
list: [
{
id: "custom-navigationbar",
url: "custom-navigationbar",
name: "自定义导航栏",
open: false,
enable: false,
pages: [] as Page[]
},{
id: "drop-card",
url: "drop-card",
name: "划走式卡片",
open: false,
pages: [] as Page[]
},{
id: "scroll-fold-nav",
url: "scroll-fold-nav",
name: "随滚动折叠的导航栏",
open: false,
pages: [] as Page[]
},
{
id: "custom-pull-page",
url: "custom-pull-page",
name: "自定义上拉下拉效果",
open: false,
pages: [] as Page[]
},
{
id: "swiper-vertical-video",
url: "swiper-vertical-video",
name: "竖滑视频",
open: false,
pages: [] as Page[]
},
{
id: "sticky",
url: "sticky",
name: "吸顶",
open: false,
enable: false,
pages: [] as Page[]
},
{
id: "swiper-list",
url: "swiper-list",
name: "swiper-list",
open: false,
enable: false,
pages: [] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url!
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/template/${e.url}/${e.url}`
uni.navigateTo({
url
})
}
}
}
type ListItem = {
id : string,
name : string,
open : boolean,
pages : Page[],
url ?: string,
enable ?: boolean
}
export default {
data() {
return {
list: [
{
id: "scroll-fold-nav",
url: "scroll-fold-nav",
name: "随滚动折叠的导航栏",
open: false,
pages: [] as Page[]
}, {
id: "swiper-list",
url: "swiper-list",
name: "swiper-list",
open: false,
enable: false,
pages: [] as Page[]
}, {
id: "custom-pull-page",
url: "custom-pull-page",
name: "自定义上拉下拉效果",
open: false,
pages: [] as Page[]
},
{
id: "pull-zoom-image",
url: "pull-zoom-image",
name: "下拉缩放顶部封面图",
open: false,
enable: false,
pages: [] as Page[]
},
{
id: "show-search-with-scroll",
url: "show-search-with-scroll",
name: "滚动后自动显隐的搜索框",
open: false,
enable: false,
pages: [] as Page[]
},
{
id: "swiper-vertical-video",
url: "swiper-vertical-video",
name: "竖滑视频",
open: false,
pages: [] as Page[]
},
{
id: "sticky",
url: "sticky",
name: "吸顶",
open: false,
enable: false,
pages: [] as Page[]
},
{
id: "drop-card",
url: "drop-card",
name: "划走式卡片",
open: false,
pages: [] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
methods: {
triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) {
const page : Page = {
name: item.name,
enable: item.enable,
url: item.url!
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/template/${e.url}/${e.url}`
uni.navigateTo({
url
})
}
}
}
</script>
<style>
@import '../../common/uni-uvue.css';
@import '../../common/uni-uvue.css';
.uni-container {
flex: 1;
}
.uni-container {
flex: 1;
}
</style>
\ No newline at end of file
pages/template/scroll-fold-nav/scroll-fold-nav.uvue
浏览文件 @ 4f347962
......@@ -5,7 +5,7 @@
<view style="height: 110px;">
<!-- 垫高专用 -->
</view>
<view v-for="(item,index) in 100" :key="index" style="height: 100px;background-color: #FFF;">
<view v-for="(item,index) in 20" :key="index" style="height: 100px;background-color: #FFF;">
content-{{item}}
</view>
</view>
......@@ -49,12 +49,23 @@
this.scrollTop = e.detail.scrollTop
},
back(){
// 暂不支持通过navigateBack api 返回
// uni.navigateBack()
// uni.navigateBack() // 这么写用不了
// 这么写可以用
uni.navigateBack({
success(result) {
console.log('navigateBack success', result.errMsg)
},
fail(error) {
console.log('navigateBack fail', error.errMsg)
},
complete(result) {
console.log('navigateBack complete', result.errMsg)
},
})
uni.switchTab({
url:'/pages/tabBar/template'
})
// uni.switchTab({
// url:'/pages/tabBar/template'
// })
},
toSearchPage(){
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或