Skip to content

U
uni-starter

萌新之路 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 1
Fork 0
U
uni-starter

体验新版 GitCode，发现更多精彩内容 >>

提交 fa880fe6 编写于 作者: 芊 芊里
浏览文件
操作

list首页布局调整

上级 1fe6a8d5
隐藏空白更改
内联 并排
Showing with 309 addition and 327 deletion
App.vue
浏览文件 @ fa880fe6
...@@ -6,17 +6,8 @@ ...@@ -6,17 +6,8 @@
appVersion:{} appVersion:{}
}, },
onLaunch: function() { onLaunch: function() {
//#ifdef APP-PLUS
// 保持屏幕常亮
uni.setKeepScreenOn({
keepScreenOn: true
});
//#endif
console.log('App Launch') console.log('App Launch')
// initApp();
initApp();
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')
...@@ -29,4 +20,14 @@ ...@@ -29,4 +20,14 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共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> </style>
common/appInit.js
浏览文件 @ fa880fe6
...@@ -6,8 +6,24 @@ export default function (){ ...@@ -6,8 +6,24 @@ export default function (){
// 检查更新 // 检查更新
checkUpdate(); checkUpdate();
keepScreenOn();
} }
/**
* 保持屏幕常亮
*/
function keepScreenOn(){
//#ifdef APP-PLUS
// 保持屏幕常亮
uni.setKeepScreenOn({
keepScreenOn: true
});
//#endif
}
/**
* // 初始化appVersion
*/
function initAppVersion(){ function initAppVersion(){
// #ifdef APP-NVUE // #ifdef APP-NVUE
let appid = plus.runtime.appid; let appid = plus.runtime.appid;
......
pages/list/list.nvue → pages/list/list.vue
浏览文件 @ fa880fe6
<template> <template>
<!-- <!--
本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651 本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651
uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24 uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
unicloud-db 组件文档：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db-component uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
--> -->
<view style="overflow: hidden;"> <view style="overflow: hidden;">
<!-- 搜索栏 --> <view class="search-container-bar">
<template> <uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
<status-bar/> @search-click="searchClick" cancelButton="none" disabled />
<uni-search-bar ref="searchBar" radius="100" v-model="searchText" @search-click="searchClick" @clear="clear" @click.native="searchClick" </view>
@cancel="search" cancelButton="none" disabled /> <view class="list">
</template> <!-- 刷新页面后的顶部提示框 -->
<view class="list"> <!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
<!-- 刷新页面后的顶部提示框 --> <view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 --> <!-- 页面分类标题 -->
<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"
<uni-section style="margin:0;" :title="listTitle" type="line"></uni-section> :collection="collection" :field="field" :where="where" @load="load">
<unicloud-db ref="udb" :where="where" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection" <text v-if="error" class="list-info">{{error.message}}</text>
:field="field" @load="load"> <!-- 基于 uni-list 的页面布局 -->
<!-- 基于 uni-list 的页面布局 --> <uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
<uni-list> <!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
<!-- to 属性携带参数跳转详情页面，当前只为参考 --> <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
<uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/list/detail?id='+item._id+'&title='+item.title"> <uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
<!-- 通过body插槽定义列表内容显示 --> v-for="item in data" :key="item._id">
<template v-slot:body> <!-- 通过header插槽定义列表左侧图片 -->
<view class="uni-list-box"> <template v-slot:header>
<view class="uni-thumb"> <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 --> <image :src="item.avatar" mode="aspectFill"></image>
<image class="uni-thumb-img" :src="item.avatar" mode="aspectFill"></image> </view>
</view> </template>
<view class="uni-content"> <!-- 通过body插槽定义布局 -->
<text class="uni-title-sub uni-ellipsis-2">{{item.title}}</text> <view slot="body" class="shop">
<view class="uni-note"> <view>
<text class="uni-footer-text">评论 {{item.comment_count}}</text> <view class="uni-title">
<text class="uni-footer-text">点赞 {{item.like_count}}</text> <text class="uni-ellipsis-2">{{ item.title }}</text>
</view>
</view> </view>
</view> </view>
</template> <view>
<!-- 同步footer插槽定义列表底部的显示效果 --> <view class="uni-note ellipsis">
<template v-slot:footer> <text class="uni-ellipsis-1">{{ item.author[0].username }}</text>
<view class="uni-footer"> <text>{{ item.comment_count }}评论</text>
<text class="uni-footer-text">{{item.author[0].username}}</text> <uni-dateformat :date="item.last_modify_date" format="yyyy-MM-dd" :threshold="[60000, 2592000000]"/>
<text class="uni-footer-text">{{ item.last_modify_date | beforTime }}</text> </view>
</view> </view>
</template> </view>
</uni-list-item>
</uni-list-item> </uni-list>
</uni-list> <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 --> <uni-load-more v-if="!error && (loading || options.status === 'noMore') " :status="options.status" />
<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> </unicloud-db>
</unicloud-db> </view>
</view> </view>
</view> </template>
</template>
<script>
<script> export default {
import { friendlyDate } from '@/common/utils.js'; data() {
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar"; return {
export default { searchText: '',
components:{ formData: {
statusBar waterfall: false, // 布局方向切换
}, status: 'loading', // 加载状态
data() { },
return { where: '',
searchText: '', // 数据表名
where: '', collection: 'opendb-news-articles,uni-id-users',
// 数据表名 // 查询字段，多个字段用 , 分割
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 // 是否显示顶部提示框
field: 'author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count', };
formData: { },
status: 'loading' // 加载状态 onShow(options) {
}, this.searchText = getApp().globalData.searchText;
tipShow: false // 是否显示顶部提示框 },
}; methods: {
}, /**
onShow(options) { * 切换商品列表布局方向
this.searchText = getApp().globalData.searchText; */
}, select() {
filters:{ this.formData.waterfall = !this.formData.waterfall;
beforTime(number){ },
return friendlyDate(+number); /**
} * 下拉刷新回调函数
}, */
methods: { onPullDownRefresh() {
/** this.tipShow = true
* 下拉刷新回调函数 this.formData.status = 'more'
*/ this.$refs.udb.loadData({
onPullDownRefresh() { clear: true
this.tipShow = true }, () => {
this.formData.status = 'more' this.tipShow = false
this.$refs.udb.loadData({ uni.stopPullDownRefresh()
clear: true })
}, () => { },
this.tipShow = false /**
uni.stopPullDownRefresh() * 上拉加载回调函数
}) */
}, onReachBottom() {
/** this.$refs.udb.loadMore()
* 上拉加载回调函数 },
*/ load(data, ended) {
onReachBottom() { if (ended) {
this.$refs.udb.loadMore() this.formData.status = 'noMore'
}, }
load(data, ended) { },
if (ended) { searchClick() {
this.formData.status = 'noMore' uni.hideKeyboard();
} uni.navigateTo({
}, url: '/pages/search/search',
search(text = '') { animationType: 'fade-in'
this.where = text ? `${new RegExp(text, 'gi')}.test(title)` : ''; });
}, }
clear() { },
getApp().globalData.searchText = ''; watch: {
}, searchText(value) {
searchClick() { this.search(value);
uni.hideKeyboard(); }
uni.navigateTo({ },
url: '/pages/search/search', computed: {
animationType: 'fade-in' listTitle() {
}); if (this.searchText) return '搜索结果';
} return '';
}, }
watch: { }
searchText(value) { };
this.search(value); </script>
}
}, <style lang="scss" scoped>
computed: { @import '@/common/uni-ui.scss';
listTitle() {
return this.searchText === '' ? '最新' : '搜索结果' page {
} display: flex;
} flex-direction: column;
}; box-sizing: border-box;
</script> background-color: #efeff4;
min-height: 100%;
<style lang="scss" scoped> height: auto;
@import '@/common/uni-ui.scss'; }
page { .tips {
display: flex; color: #67c23a;
flex-direction: column; font-size: 14px;
box-sizing: border-box; line-height: 40px;
background-color: #efeff4; text-align: center;
min-height: 100%; background-color: #f0f9eb;
height: auto; height: 0;
} opacity: 0;
transform: translateY(-100%);
.tips { transition: all 0.3s;
color: #67c23a; }
font-size: 14px;
line-height: 40px; .tips-ani {
text-align: center; transform: translateY(0);
background-color: #f0f9eb; height: 40px;
height: 0; opacity: 1;
opacity: 0; }
transform: translateY(-100%);
transition: all 0.3s; .shop {
} flex: 1;
display: flex;
.tips-ani { flex-direction: column;
transform: translateY(0); justify-content: space-between;
height: 40px; }
opacity: 1;
} .shop-picture {
width: 110px;
.shop { height: 110px;
flex: 1; }
display: flex;
flex-direction: column; .shop-picture-column {
justify-content: space-between; width: 100%;
} height: 170px;
margin-bottom: 10px;
.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;
} }
.uni-ellipsis-1 { .ellipsis {
overflow: hidden; display: flex;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
}
.uni-ellipsis-1 {
.uni-ellipsis-2 { overflow: hidden;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; }
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; .uni-ellipsis-2 {
overflow: hidden;
lines: 2; text-overflow: ellipsis;
} display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
// 默认加入 scoped ，所以外面加一层提升权重 }
.list { .uni-note{
.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 */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; 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; justify-content: space-between;
align-items: center; 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> </style>
pages/uni-feedback/uni-feedback.nvue
浏览文件 @ fa880fe6
...@@ -209,9 +209,12 @@ export default { ...@@ -209,9 +209,12 @@ export default {
</script> </script>
<style> <style>
page { /* #ifndef APP-NVUE */
background-color: #efeff4; page {
} background-color: #efeff4;
}
/* #endif */
.input-view { .input-view {
font-size: 28rpx; font-size: 28rpx;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或