Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
萌新之路
uni-starter
提交
fa880fe6
U
uni-starter
项目概览
萌新之路
/
uni-starter
与 Fork 源项目一致
Fork自
DCloud / uni-starter
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-starter
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fa880fe6
编写于
4月 07, 2021
作者:
芊
芊里
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
list首页布局调整
上级
1fe6a8d5
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
309 addition
and
327 deletion
+309
-327
App.vue
App.vue
+11
-10
common/appInit.js
common/appInit.js
+16
-0
pages/list/list.vue
pages/list/list.vue
+276
-314
pages/uni-feedback/uni-feedback.nvue
pages/uni-feedback/uni-feedback.nvue
+6
-3
未找到文件。
App.vue
浏览文件 @
fa880fe6
...
...
@@ -6,17 +6,8 @@
appVersion
:{}
},
onLaunch
:
function
()
{
//#ifdef APP-PLUS
// 保持屏幕常亮
uni
.
setKeepScreenOn
({
keepScreenOn
:
true
});
//#endif
console
.
log
(
'
App Launch
'
)
initApp
();
// initApp();
},
onShow
:
function
()
{
console
.
log
(
'
App Show
'
)
...
...
@@ -29,4 +20,14 @@
<
style
>
/*每个页面公共css */
.border-test
{
/* #ifdef APP-NVUE */
border-width
:
1
rpx
;
border-color
:
#DD524D
;
/* #endif */
/* #ifndef APP-NVUE */
border
:
1px
solid
#DD524D
;
box-sizing
:
border-box
;
/* #endif */
}
</
style
>
common/appInit.js
浏览文件 @
fa880fe6
...
...
@@ -6,8 +6,24 @@ export default function (){
// 检查更新
checkUpdate
();
keepScreenOn
();
}
/**
* 保持屏幕常亮
*/
function
keepScreenOn
(){
//#ifdef APP-PLUS
// 保持屏幕常亮
uni
.
setKeepScreenOn
({
keepScreenOn
:
true
});
//#endif
}
/**
* // 初始化appVersion
*/
function
initAppVersion
(){
// #ifdef APP-NVUE
let
appid
=
plus
.
runtime
.
appid
;
...
...
pages/list/list.
n
vue
→
pages/list/list.vue
浏览文件 @
fa880fe6
<template>
<!--
本页面模板教程:https://ext.dcloud.net.cn/plugin?id=2651
uni-list 文档:https://ext.dcloud.net.cn/plugin?id=24
uniCloud 文档:https://uniapp.dcloud.io/uniCloud/README
unicloud-db 组件文档:https://uniapp.dcloud.net.cn/uniCloud/unicloud-db-component
DB Schema 规范:https://uniapp.dcloud.net.cn/uniCloud/schema
-->
<view style="overflow: hidden;">
<!-- 搜索栏 -->
<template>
<status-bar/>
<uni-search-bar ref="searchBar" radius="100" v-model="searchText" @search-click="searchClick" @clear="clear" @click.native="searchClick"
@cancel="search" cancelButton="none" disabled />
</template>
<view class="list">
<!-- 刷新页面后的顶部提示框 -->
<!-- 当前弹出内容没有实际逻辑 ,可根据当前业务修改弹出提示 -->
<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
<!-- 页面分类标题 -->
<uni-section style="margin:0;" :title="listTitle" type="line"></uni-section>
<unicloud-db ref="udb" :where="where" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
:field="field" @load="load">
<!-- 基于 uni-list 的页面布局 -->
<uni-list>
<!-- to 属性携带参数跳转详情页面,当前只为参考 -->
<uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/list/detail?id='+item._id+'&title='+item.title">
<!-- 通过body插槽定义列表内容显示 -->
<template v-slot:body>
<view class="uni-list-box">
<view class="uni-thumb">
<!-- 当前判断长度只为简单判断类型,实际业务中,根据逻辑直接渲染即可 -->
<image class="uni-thumb-img" :src="item.avatar" mode="aspectFill"></image>
</view>
<view class="uni-content">
<text class="uni-title-sub uni-ellipsis-2">{{item.title}}</text>
<view class="uni-note">
<text class="uni-footer-text">评论 {{item.comment_count}}</text>
<text class="uni-footer-text">点赞 {{item.like_count}}</text>
</view>
<
template
>
<!--
本页面模板教程:https://ext.dcloud.net.cn/plugin?id=2651
uni-list 文档:https://ext.dcloud.net.cn/plugin?id=24
uniCloud 文档:https://uniapp.dcloud.io/uniCloud/README
uni-clientDB 组件文档:https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
DB Schema 规范:https://uniapp.dcloud.net.cn/uniCloud/schema
-->
<view
style=
"overflow: hidden;"
>
<view
class=
"search-container-bar"
>
<uni-search-bar
ref=
"searchBar"
style=
"flex:1;"
radius=
"100"
v-model=
"searchText"
@
search-click=
"searchClick"
cancelButton=
"none"
disabled
/>
</view>
<view
class=
"list"
>
<!-- 刷新页面后的顶部提示框 -->
<!-- 当前弹出内容没有实际逻辑 ,可根据当前业务修改弹出提示 -->
<view
class=
"tips"
:class=
"
{ 'tips-ani': tipShow }">为您更新了10条内容
</view>
<!-- 页面分类标题 -->
<uni-section
style=
"margin:0;"
v-if=
"searchText"
:title=
"listTitle"
type=
"line"
></uni-section>
<unicloud-db
ref=
"udb"
v-slot:default=
"
{data, loading, error, options}" :options="formData"
:collection="collection" :field="field" :where="where" @load="load">
<text
v-if=
"error"
class=
"list-info"
>
{{
error
.
message
}}
</text>
<!-- 基于 uni-list 的页面布局 -->
<uni-list
:class=
"
{ 'uni-list--waterfall': options.waterfall }">
<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
<!-- to 属性携带参数跳转详情页面,当前只为参考 -->
<uni-list-item
:border=
"!options.waterfall"
class=
"uni-list-item--waterfall"
title=
"自定义商品列表"
v-for=
"item in data"
:key=
"item._id"
>
<!-- 通过header插槽定义列表左侧图片 -->
<template
v-slot:header
>
<view
class=
"uni-thumb shop-picture"
:class=
"
{ 'shop-picture-column': options.waterfall }">
<image
:src=
"item.avatar"
mode=
"aspectFill"
></image>
</view>
</
template
>
<!-- 通过body插槽定义布局 -->
<view
slot=
"body"
class=
"shop"
>
<view>
<view
class=
"uni-title"
>
<text
class=
"uni-ellipsis-2"
>
{{ item.title }}
</text>
</view>
</view>
</template
>
<!-- 同步footer插槽定义列表底部的显示效果 --
>
<template v-slot:footer
>
<view class="uni-footer"
>
<text class="uni-footer-text">{{item.author[0].username}}</text
>
<
text class="uni-footer-text">{{ item.last_modify_date | beforTime }}</text
>
<view
>
<view
class=
"uni-note ellipsis"
>
<text
class=
"uni-ellipsis-1"
>
{{ item.author[0].username }}
</text
>
<text>
{{ item.comment_count }}评论
</text
>
<uni-dateformat
:date=
"item.last_modify_date"
format=
"yyyy-MM-dd"
:threshold=
"[60000, 2592000000]"
/
>
<
/view
>
</view>
</template>
</uni-list-item>
</uni-list>
<!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 -->
<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
</unicloud-db>
</view>
</view>
</template>
<script>
import { friendlyDate } from '@/common/utils.js';
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
export default {
components:{
statusBar
},
data() {
return {
searchText: '',
where: '',
// 数据表名
collection: 'opendb-news-articles,uni-id-users',
// 查询字段,多个字段用 , 分割
field: 'author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count',
formData: {
status: 'loading' // 加载状态
},
tipShow: false // 是否显示顶部提示框
};
},
onShow(options) {
this.searchText = getApp().globalData.searchText;
},
filters:{
beforTime(number){
return friendlyDate(+number);
}
},
methods: {
/**
* 下拉刷新回调函数
*/
onPullDownRefresh() {
this.tipShow = true
this.formData.status = 'more'
this.$refs.udb.loadData({
clear: true
}, () => {
this.tipShow = false
uni.stopPullDownRefresh()
})
},
/**
* 上拉加载回调函数
*/
onReachBottom() {
this.$refs.udb.loadMore()
},
load(data, ended) {
if (ended) {
this.formData.status = 'noMore'
}
},
search(text = '') {
this.where = text ? `${new RegExp(text, 'gi')}.test(title)` : '';
},
clear() {
getApp().globalData.searchText = '';
},
searchClick() {
uni.hideKeyboard();
uni.navigateTo({
url: '/pages/search/search',
animationType: 'fade-in'
});
}
},
watch: {
searchText(value) {
this.search(value);
}
},
computed: {
listTitle() {
return this.searchText === '' ? '最新' : '搜索结果'
}
}
};
</script>
<style lang="scss" scoped>
@import '@/common/uni-ui.scss';
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
.tips {
color: #67c23a;
font-size: 14px;
line-height: 40px;
text-align: center;
background-color: #f0f9eb;
height: 0;
opacity: 0;
transform: translateY(-100%);
transition: all 0.3s;
}
.tips-ani {
transform: translateY(0);
height: 40px;
opacity: 1;
}
.shop {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shop-picture {
width: 110px;
height: 110px;
}
.shop-picture-column {
width: 100%;
height: 170px;
margin-bottom: 10px;
}
.shop-price {
margin-top: 5px;
font-size: 12px;
color: #ff5a5f;
}
.shop-price-text {
font-size: 16px;
}
.hot-tag {
background: #ff5a5f;
border: none;
color: #fff;
}
.button-box {
height: 30px;
line-height: 30px;
font-size: 12px;
background: #007AFF;
color: #fff;
}
.uni-link {
flex-shrink: 0;
}
.ellipsis {
display: flex;
overflow: hidden;
</view>
</uni-list-item>
</uni-list>
<!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 -->
<uni-load-more
v-if=
"!error && (loading || options.status === 'noMore') "
:status=
"options.status"
/>
</unicloud-db>
</view>
</view>
</template>
<
script
>
export
default
{
data
()
{
return
{
searchText
:
''
,
formData
:
{
waterfall
:
false
,
// 布局方向切换
status
:
'
loading
'
,
// 加载状态
},
where
:
''
,
// 数据表名
collection
:
'
opendb-news-articles,uni-id-users
'
,
// 查询字段,多个字段用 , 分割
field
:
'
author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count
'
,
tipShow
:
false
// 是否显示顶部提示框
};
},
onShow
(
options
)
{
this
.
searchText
=
getApp
().
globalData
.
searchText
;
},
methods
:
{
/**
* 切换商品列表布局方向
*/
select
()
{
this
.
formData
.
waterfall
=
!
this
.
formData
.
waterfall
;
},
/**
* 下拉刷新回调函数
*/
onPullDownRefresh
()
{
this
.
tipShow
=
true
this
.
formData
.
status
=
'
more
'
this
.
$refs
.
udb
.
loadData
({
clear
:
true
},
()
=>
{
this
.
tipShow
=
false
uni
.
stopPullDownRefresh
()
})
},
/**
* 上拉加载回调函数
*/
onReachBottom
()
{
this
.
$refs
.
udb
.
loadMore
()
},
load
(
data
,
ended
)
{
if
(
ended
)
{
this
.
formData
.
status
=
'
noMore
'
}
},
searchClick
()
{
uni
.
hideKeyboard
();
uni
.
navigateTo
({
url
:
'
/pages/search/search
'
,
animationType
:
'
fade-in
'
});
}
},
watch
:
{
searchText
(
value
)
{
this
.
search
(
value
);
}
},
computed
:
{
listTitle
()
{
if
(
this
.
searchText
)
return
'
搜索结果
'
;
return
''
;
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
@import
'@/common/uni-ui.scss'
;
page
{
display
:
flex
;
flex-direction
:
column
;
box-sizing
:
border-box
;
background-color
:
#efeff4
;
min-height
:
100%
;
height
:
auto
;
}
.tips
{
color
:
#67c23a
;
font-size
:
14px
;
line-height
:
40px
;
text-align
:
center
;
background-color
:
#f0f9eb
;
height
:
0
;
opacity
:
0
;
transform
:
translateY
(
-100%
);
transition
:
all
0
.3s
;
}
.tips-ani
{
transform
:
translateY
(
0
);
height
:
40px
;
opacity
:
1
;
}
.shop
{
flex
:
1
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-between
;
}
.shop-picture
{
width
:
110px
;
height
:
110px
;
}
.shop-picture-column
{
width
:
100%
;
height
:
170px
;
margin-bottom
:
10px
;
}
.uni-ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.uni-ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
lines: 2;
}
// 默认加入 scoped ,所以外面加一层提升权重
.list {
.uni-list--waterfall {
/* #ifndef H5 || APP-VUE */
// 小程序 编译后会多一层标签,而其他平台没有,所以需要特殊处理一下
/deep/ .uni-list {
/* #endif */
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 5px;
box-sizing: border-box;
/* #ifdef H5 || APP-VUE */
// h5 和 app-vue 使用深度选择器,因为默认使用了 scoped ,所以样式会无法穿透
/deep/
/* #endif */
.uni-list-item--waterfall {
width: 50%;
box-sizing: border-box;
.uni-list-item__container {
padding: 5px;
flex-direction: column;
}
}
/* #ifndef H5 || APP-VUE */
}
/* #endif */
}
}
.search-icons {
padding: 16rpx;
}
.search-container-bar {
.ellipsis
{
display
:
flex
;
overflow
:
hidden
;
}
.uni-ellipsis-1
{
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
.uni-ellipsis-2
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
display
:
-
webkit-box
;
-webkit-line-clamp
:
2
;
-webkit-box-orient
:
vertical
;
}
.uni-note
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
z-index: 10;
background-color: #fff;
}
/* #ifndef APP-NVUE */
/deep/
/* #endif */
.uni-searchbar__box {
border-width: 0;
}
/* #ifndef APP-NVUE */
/deep/
/* #endif */
.uni-input-placeholder {
font-size: 28rpx;
}
.uni-content{
flex: 1;
}
.uni-thumb-img{
width: 125px;
height: 75px;
}
.uni-note{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content
:
space-between
;
align-items
:
center
;
}
flex-wrap
:
nowrap
;
}
// 默认加入 scoped ,所以外面加一层提升权重
.list
{
// margin-top: 52px;
.uni-list--waterfall
{
/* #ifndef H5 || APP-VUE */
// 小程序 编译后会多一层标签,而其他平台没有,所以需要特殊处理一下
/
deep
/
.uni-list
{
/* #endif */
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
padding
:
5px
;
box-sizing
:
border-box
;
/* #ifdef H5 || APP-VUE */
// h5 和 app-vue 使用深度选择器,因为默认使用了 scoped ,所以样式会无法穿透
/
deep
/
/*
#endif
*/
.uni-list-item--waterfall
{
width
:
50%
;
box-sizing
:
border-box
;
.uni-list-item__container
{
padding
:
5px
;
flex-direction
:
column
;
}
}
/* #ifndef H5 || APP-VUE */
}
/* #endif */
}
}
.search-icons
{
padding
:
16rpx
;
}
.search-container-bar
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
// position: fixed;
// left: 0;
// right: 0;
// z-index: 10;
background-color
:
#fff
;
}
/* #ifndef APP-NVUE */
/
deep
/
/*
#endif
*/
.uni-searchbar__box
{
border-width
:
0
;
}
/* #ifndef APP-NVUE */
/
deep
/
/*
#endif
*/
.uni-input-placeholder
{
font-size
:
28rpx
;
}
.list-info
{
/* #ifndef APP-NVUE */
display
:
block
;
/* #endif */
flex
:
1
;
text-align
:
center
;
font-size
:
26rpx
;
color
:
#808080
;
margin-top
:
20rpx
;
}
</
style
>
pages/uni-feedback/uni-feedback.nvue
浏览文件 @
fa880fe6
...
...
@@ -209,9 +209,12 @@ export default {
</script>
<style>
page {
background-color: #efeff4;
}
/* #ifndef APP-NVUE */
page {
background-color: #efeff4;
}
/* #endif */
.input-view {
font-size: 28rpx;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录