提交 e027c510 编写于 作者: 郭胜强

Merge branch 'master' of github.com:dcloudio/uni-app

......@@ -32,36 +32,36 @@
padding: 0;
}
.wxParse .h1 {
.wxParse .h1>view {
font-size: 2em;
margin: 0.67em 0;
}
.wxParse .h2 {
.wxParse .h2>view {
font-size: 1.5em;
margin: 0.83em 0;
}
.wxParse .h3 {
.wxParse .h3>view {
font-size: 1.17em;
margin: 1em 0;
}
.wxParse .h4 {
.wxParse .h4>view {
margin: 1.33em 0;
}
.wxParse .h5 {
.wxParse .h5>view {
font-size: 0.83em;
margin: 1.67em 0;
}
.wxParse .h6 {
.wxParse .h6>view {
font-size: 0.67em;
margin: 2.33em 0;
}
.wxParse .h1,
.wxParse .h2,
.wxParse .h3,
.wxParse .h4,
.wxParse .h5,
.wxParse .h6,
.wxParse .h1>view,
.wxParse .h2>view,
.wxParse .h3>view,
.wxParse .h4>view,
.wxParse .h5>view,
.wxParse .h6>view,
.wxParse .b,
.wxParse .strong {
font-weight: bolder;
......
<template>
<view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}" :style="{'background-color':backgroundColor}">
<uni-status-bar v-if="insertStatusBar"></uni-status-bar>
<view class="uni-navbar-header" :style="{color:color}">
<view class="uni-navbar-btn uni-navbar-btn-left" @tap="onClickLeft">
<view v-if="leftIcon.length" class="uni-navbar-btn-icon" :class="{'uni-navbar-btn-icon-left':!leftText.length}">
<uni-icon :type="leftIcon" :color="color" size="24"></uni-icon>
</view>
<view v-if="leftText.length" class="uni-navbar-btn-text" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}">{{leftText}}</view>
<slot name="left"></slot>
</view>
<view class="uni-navbar-container">
<view v-if="title.length" class="uni-navbar-container-title">{{title}}</view>
<!-- 标题插槽 -->
<slot></slot>
</view>
<view class="uni-navbar-btn uni-navbar-btn-right" @tap="onClickRight">
<view v-if="rightIcon.length" class="uni-navbar-btn-icon uni-navbar-btn-icon-right">
<view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}" :style="{'background-color':backgroundColor}">
<uni-status-bar v-if="insertStatusBar"></uni-status-bar>
<view class="uni-navbar-header" :style="{color:color}">
<view class="uni-navbar-header-btns" @tap="onClickLeft">
<view v-if="leftIcon.length">
<uni-icon :type="leftIcon" :color="color" size="24"></uni-icon>
</view>
<view v-if="leftText.length" class="uni-navbar-btn-text" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}">{{leftText}}</view>
<slot name="left"></slot>
</view>
<view class="uni-navbar-container">
<view v-if="title.length" class="uni-navbar-container-title">{{title}}</view>
<!-- 标题插槽 -->
<slot></slot>
</view>
<view class="uni-navbar-header-btns" @tap="onClickRight">
<view v-if="rightIcon.length">
<uni-icon :type="rightIcon" :color="color" size="24"></uni-icon>
</view>
<!-- 优先显示图标 -->
<view v-if="rightText.length&&!rightIcon.length" class="uni-navbar-btn-text">{{rightText}}</view>
<slot name="right"></slot>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -162,7 +162,7 @@
}
.uni-navbar view{
line-height:2.75em;
line-height:44px;
}
.uni-navbar-shadow {
......@@ -178,57 +178,28 @@
display: flex;
flex-direction: row;
width: 100%;
height: 2.75em;
line-height: 2.75em;
height:44px;
line-height:44px;
font-size: 16px;
}
.uni-navbar-btn {
position: relative;
width: 4.125em;
text-align: center;
display: flex;
flex-direction: row;
padding: 0 0.125em;
}
.uni-navbar-btn-icon {
display: flex;
flex-direction: column;
justify-content: center;
}
.uni-navbar-btn-icon-left {
margin-left: 0.625em;
}
.uni-navbar-btn-icon-right {
margin-right: 0.625em;
}
.uni-navbar-btn-text {
padding: 0 0.25em;
overflow: hidden;
}
.uni-navbar-btn-left {
padding: 0 0 0 0.125em;
}
.uni-navbar-btn-right {
padding: 0 0.125em 0 0;
flex-direction: row-reverse;
}
.uni-navbar-container {
position: relative;
flex: 1;
}
.uni-navbar-container-title {
text-align: center;
color: #000000;
padding: 0 0.3125em;
overflow: hidden;
}
.uni-navbar-header .uni-navbar-header-btns{
display:inline-flex;
flex-wrap:nowrap;
flex-shrink:0;
padding:0 12upx;
}
.uni-navbar-header .uni-navbar-header-btns:first-child{
padding-left:0;
}
.uni-navbar-container{
width:100%;
margin:0 10upx;
}
.uni-navbar-container-title{
font-size:30upx;
text-align:center;
}
</style>
......@@ -4,17 +4,23 @@
<!-- 固定在顶部的导航栏 -->
<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"
title="导航栏组件"></uni-nav-bar>
<!-- 占位用的导航栏 -->
<uni-nav-bar background-color="rgba(0,0,0,0)" status-bar="true"></uni-nav-bar>
<!-- 使用非原生导航栏后需要在页面顶部占位 -->
<view style="height:80px;">...</view>
<!-- #endif -->
<view class="title">本导航栏为自定义组件,并非原生导航栏。除非原生导航栏无法满足需求,否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921</view>
<view class="title">基础用法(注意右上角应避开微信小程序自带的胶囊按钮)</view>
<uni-nav-bar left-icon="back" @click-left="back" title="标题"></uni-nav-bar>
<!-- <uni-nav-bar left-icon="camera" @click-left="clickLeft" @click-right="showMenu" right-icon="bars" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="back" left-text="返回" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="showMenu" @click-right="showMenu" left-text="菜单" right-text="菜单" title="标题"></uni-nav-bar> -->
<view class="title">其他常见样式</view>
<view class="uni-padding-wrap">
<view class="uni-helllo-text uni-common-mt">
本导航栏为自定义组件,并非原生导航栏。除非原生导航栏无法满足需求,否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921
</view>
<view class="uni-title uni-center uni-common-mt">
基础用法
<text>\n返回图标 + 标题</text>
</view>
</view>
<uni-nav-bar left-icon="back" left-text="返回" @click-left="back" title="标题"></uni-nav-bar>
<view class="uni-title uni-center uni-common-mt">
其他常见样式
<text>\n城市选择 + 搜索 + 右侧按钮</text>
</view>
<uni-nav-bar color="#333333" background-color="#FFFFFF" fixed="false" right-icon="scan" @click-left="showCity"
@click-right="scan">
<block slot="left">
......@@ -106,24 +112,29 @@
align-items: center;
justify-content: center;
width: 100%;
margin-left:8px;
}
.input-view {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
align-items: center;
width: 92%;
display: flex;
flex-direction: row;
background-color: #e7e7e7;
height: 30px;
border-radius: 15px;
padding: 0 10px;
padding: 0 4%;
flex-wrap:nowrap;
margin:7px 0;
line-height:30px;
}
.input-view .uni-icon{
line-height:30px !important;
}
.input {
flex: 1;
padding: 0 5px;
.input-view .input {
height:20px;
line-height:20px;
width:94%;
padding: 5px 3%;
}
</style>
<template>
<view class="index">
<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
<view class="uni-tab-bar">
<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']"
:id="tab.id" :data-current="index" @tap="tapTab">{{tab.name}}</view>
</scroll-view>
......@@ -10,22 +10,29 @@
<block v-for="(newsitem,index2) in tab.data" :key="index2">
<media-list :data="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
</block>
<view class="loadmore">
<text class="loadmore-text">{{tab.loadingText}}</text>
</view>
<view class="uni-tab-bar-loading">
<load-more :loadingType="tab.loadingType" :contentText="loadingText"></load-more>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import mediaList from '@/components/tab-nvue/mediaList.vue'
import mediaList from '@/components/tab-nvue/mediaList.vue';
import loadMore from '@/components/load-more.vue';
export default {
components: {
mediaList
mediaList,
loadMore
},
data() {
return {
loadingText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
scrollLeft: 0,
isClickChange: false,
tabIndex: 0,
......@@ -131,19 +138,20 @@
})
},
loadMore(e) {
this.newsitems[e].loadingType = 1;
setTimeout(() => {
this.addData(e);
}, 1000);
}, 1200);
},
addData(e) {
console.log("加载更多...");
if (this.newsitems[e].data.length > 30) {
this.newsitems[e].loadingText = '没有更多了';
this.newsitems[e].loadingType = 2;
return;
}
for (let i = 1; i <= 10; i++) {
this.newsitems[e].data.push(this['data' + Math.floor(Math.random() * 5)]);
}
this.newsitems[e].loadingType = 1;
},
async changeTab(e) {
let index = e.target.current;
......@@ -197,7 +205,7 @@
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: "加载更多...",
loadingType : 0,
data: []
};
for (let j = 1; j <= 10; j++) {
......@@ -212,60 +220,5 @@
</script>
<style>
page {
display: flex;
}
.index {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.list {
width: 750upx;
height: 100%;
}
.swiper-tab {
width: 100%;
white-space: nowrap;
line-height: 100upx;
height: 100upx;
border-bottom: 1px solid #c8c7cc;
}
.swiper-tab-list {
font-size: 30upx;
width: 150upx;
display: inline-block;
text-align: center;
color: #555;
}
.active {
color: #007AFF;
}
.swiper-box {
flex: 1;
width: 100%;
height: calc(100% - 100upx);
}
.loadmore {
height: 70upx;
width: 750upx;
flex-direction: column;
justify-content: center;
}
.loadmore-text {
font-size: 30upx;
text-align: center;
color: #999999;
}
</style>
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册