Skip to content

U
uni-starter

言程序plus / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter
提交 fa880fe6 编写于 作者: 芊 芊里
浏览文件
操作

list首页布局调整

上级 1fe6a8d5
隐藏空白更改
内联 并排
Showing with 309 addition and 327 deletion
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: 1rpx;
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.nvue → 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.
先完成此消息的编辑！
想要评论请 注册 或