Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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