Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zchazc
uni-starter
提交
097975d9
U
uni-starter
项目概览
zchazc
/
uni-starter
与 Fork 源项目一致
Fork自
DCloud / uni-starter
通知
3
Star
0
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,发现更多精彩内容 >>
提交
097975d9
编写于
4月 07, 2021
作者:
芊
芊里
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
搜索栏整理
上级
507b6fca
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
323 addition
and
319 deletion
+323
-319
pages.json
pages.json
+2
-3
pages/grid/grid.nvue
pages/grid/grid.nvue
+312
-311
pages/list/list.nvue
pages/list/list.nvue
+9
-5
未找到文件。
pages.json
浏览文件 @
097975d9
...
...
@@ -2,13 +2,12 @@
"pages"
:
[{
"path"
:
"pages/list/list"
,
"style"
:
{
"enablePullDownRefresh"
:
true
,
"navigationBarTitleText"
:
"列表"
"navigationStyle"
:
"custom"
}
},
{
"path"
:
"pages/grid/grid"
,
"style"
:{
"navigation
BarTitleText"
:
"宫格
"
"navigation
Style"
:
"custom
"
}
},
{
"path"
:
"pages/search/search"
,
...
...
pages/grid/grid.nvue
浏览文件 @
097975d9
<template>
<view class="warp">
<!-- 搜索 -->
<view class="search-container-bar">
<uni-search-bar ref="searchBar" style="flex:1;" radius="100" @click.native="searchClick" cancelButton="none"
disabled />
</view>
<!-- banner -->
<uni-clientdb ref="bannerdb" v-slot:default="{data, loading, error, options}" :collection="collection"
:field="field" @load="load">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="bannerFormate(data)"
:current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex">
<swiper-item v-for="(item, index) in bannerFormate(data)" :key="item._id">
<view :draggable="false" class="swiper-item" @click="clickBannerItem(item)">
<image class="swiper-image" :src="item.bannerfile" mode="aspectFill" :draggable="false" />
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</uni-clientdb>
<!-- 宫格 -->
<uni-section title="宫格组件" style="margin: 0;" type="line"></uni-section>
<view class="example-body">
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<template>
<view class="warp">
<!-- 搜索 -->
<template>
<status-bar />
<uni-search-bar ref="searchBar" style="flex:1;" radius="100" @click.native="searchClick" cancelButton="none"
disabled />
</template>
<!-- banner -->
<uni-clientdb ref="bannerdb" v-slot:default="{data, loading, error, options}" :collection="collection"
:field="field" @load="load">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="bannerFormate(data)"
:current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
<swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex">
<swiper-item v-for="(item, index) in bannerFormate(data)" :key="item._id">
<view :draggable="false" class="swiper-item" @click="clickBannerItem(item)">
<image class="swiper-image" :src="item.bannerfile" mode="aspectFill" :draggable="false" />
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</uni-clientdb>
<!-- 宫格 -->
<uni-section title="宫格组件" style="margin: 0;" type="line"></uni-section>
<view class="example-body">
<uni-grid :column="3" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<image :src="item.url" class="image" mode="aspectFill" />
<text class="text">{{ item.text }}</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
list: [{
url: '/static/c1.png',
text: 'Grid 1',
badge: '0',
type: "primary"
},
{
url: '/static/c2.png',
text: 'Grid 2',
badge: '1',
type: "success"
},
{
url: '/static/c3.png',
text: 'Grid 3',
badge: '99',
type: "warning"
},
{
url: '/static/c4.png',
text: 'Grid 4',
badge: '2',
type: "error"
},
{
url: '/static/c5.png',
text: 'Grid 5'
},
{
url: '/static/c6.png',
text: 'Grid 6'
},
{
url: '/static/c7.png',
text: 'Grid 7'
},
{
url: '/static/c8.png',
text: 'Grid 8'
},
{
url: '/static/c9.png',
text: 'Grid 9'
}
],
collection: 'opendb-banner',
// 查询字段,多个字段用 , 分割
field: '_id,bannerfile,open_url,title',
where: 'category_id==grid',
// info: [],
dotStyle: [{
backgroundColor: 'rgba(0, 0, 0, .3)',
b
order: '1px rgba(0, 0, 0, .3) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
selectedB
order: '1px rgba(0, 0, 0, .9) solid'
},
{
backgroundColor: 'rgba(255, 90, 95,0.3)',
b
order: '1px rgba(255, 90, 95,0.3) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
selectedB
order: '1px rgba(255, 90, 95,0.9) solid'
},
{
backgroundColor: 'rgba(83, 200, 249,0.3)',
b
order: '1px rgba(83, 200, 249,0.3) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
selectedB
order: '1px rgba(83, 200, 249,0.9) solid'
}
],
modeIndex: -1,
styleIndex: -1,
current: 0,
mode: 'default',
dotsStyles: {},
swiperDotIndex: 0
}
},
methods: {
change(e) {
let {
index
} = e.detail
this.list[index].badge && this.list[index].badge++
uni.showToast({
title: `点击第${index+1}个宫格`,
icon: 'none'
})
},
searchClick() {
uni.hideKeyboard();
uni.
navigateTo({
url: '/pages/search/search',
animationType: 'fade-in'
});
},
/**
* banner加载
*
/
load(data) {
console.log('banner_', data);
},
changeSwiper(e) {
this.current = e.detail.current
},
selectStyle(index) {
this.dotsStyles = this.dotStyle[index]
this.
styleIndex = index
},
selectMode(mode, index) {
this.mode = mode
this.mode
Index = index
this.
styleIndex = -1
this.
dotsStyles = this.dotStyle[0]
},
clickItem(e) {
this.swiperDotIndex = e
},
/**
* 点击banner的处理
*
/
clickBannerItem(item){
// 有外部链接-跳转url
if(item.open_url){
//#ifdef APP-PLUS
plus.runtime.openWeb(item.open_url);
//#endif
//#
ifdef H5
window.open(item.open_url)
//#endif
}
// 其余业务处理
},
/**
* banner数据过滤
*
/
bannerFormate(bannerList) {
if (bannerList.length > 0) return bannerList;
// 无数据添加默认值
let list = [{
"_id": -1,
"
bannerfile": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg",
"
open_url": "https://www.dcloud.io/",
"
title": "内容 A",
}]
return list;
}
}
}
</script>
<style>
@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
/*
#ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-
weight: normal;
font-
style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #
ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
b
ackground-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-
wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.image {
width: 50rpx;
height: 50rpx;
}
.text {
font-size: 26rpx;
margin-top: 10rpx;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.swiper-image {
width: 750rpx;
height: 400rpx;
}
.swiper-box {
height: 400rpx;
}
.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;
}
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
export default {
components: { statusBar },
data() {
return {
list: [{
url: '/static/c1.png',
text: 'Grid 1',
badge: '0',
type: "primary"
},
{
url: '/static/c2.png',
text: 'Grid 2',
badge: '1',
type: "success"
},
{
url: '/static/c3.png',
text: 'Grid 3',
badge: '99',
type: "warning"
},
{
url: '/static/c4.png',
text: 'Grid 4',
badge: '2',
type: "error"
},
{
url: '/static/c5.png',
text: 'Grid 5'
},
{
url: '/static/c6.png',
text: 'Grid 6'
},
{
url: '/static/c7.png',
text: 'Grid 7'
},
{
url: '/static/c8.png',
text: 'Grid 8'
},
{
url: '/static/c9.png',
text: 'Grid 9'
}
],
collection: 'opendb-banner',
// 查询字段,多个字段用 , 分割
field: '_id,bannerfile,open_url,title',
where: 'category_id==grid',
// info: [],
dotStyle: [{
b
ackgroundColor: 'rgba(0, 0, 0, .3)',
border: '1px rgba(0, 0, 0, .3) solid',
color: '#fff',
selectedB
ackgroundColor: 'rgba(0, 0, 0, .9)',
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
},
{
b
ackgroundColor: 'rgba(255, 90, 95,0.3)',
border: '1px rgba(255, 90, 95,0.3) solid',
color: '#fff',
selectedB
ackgroundColor: 'rgba(255, 90, 95,0.9)',
selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
},
{
b
ackgroundColor: 'rgba(83, 200, 249,0.3)',
border: '1px rgba(83, 200, 249,0.3) solid',
color: '#fff',
selectedB
ackgroundColor: 'rgba(83, 200, 249,0.9)',
selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
}
],
modeIndex: -1,
styleIndex: -1,
current: 0,
mode: 'default',
dotsStyles: {},
swiperDotIndex: 0
}
},
methods: {
change(e) {
let {
index
} = e.detail
this.list[index].badge && this.list[index].badge++
uni.showToast({
title: `点击第${index+1}个宫格`,
icon: 'none'
})
},
searchClick() {
uni.
hideKeyboard();
uni.navigateTo({
url: '/pages/search/search',
animationType: 'fade-in'
});
},
/**
*
banner加载
*/
load(data) {
console.log('banner_', data);
},
changeSwiper(e) {
this.current = e.detail.current
},
selectStyle(index) {
this.
dotsStyles = this.dotStyle[index]
this.styleIndex = index
},
selectMode(mode, index) {
this.mode
= mode
this.
modeIndex = index
this.
styleIndex = -1
this.dotsStyles = this.dotStyle[0]
},
clickItem(e) {
this.swiperDotIndex = e
},
/**
*
点击banner的处理
*/
clickBannerItem(item) {
// 有外部链接-跳转url
if (item.open_url) {
//#ifdef APP-PLUS
plus.runtime.openWeb(item.open_url);
//#
endif
//#ifdef H5
window.open(item.open_url)
//#endif
}
// 其余业务处理
},
/**
*
banner数据过滤
*/
bannerFormate(bannerList) {
if (bannerList.length > 0) return bannerList;
// 无数据添加默认值
let list = [{
"
_id": -1,
"
bannerfile": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg",
"
open_url": "https://www.dcloud.io/",
"title": "内容 A",
}]
return list;
}
}
}
</script>
<style>
@charset "UTF-8";
/*
头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-
family: uniicons;
font-
weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #
endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
b
ox-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-
direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.image {
width: 50rpx;
height: 50rpx;
}
.text {
font-size: 26rpx;
margin-top: 10rpx;
}
.example-body {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.swiper-image {
width: 750rpx;
height: 400rpx;
}
.swiper-box {
height: 400rpx;
}
.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;
}
</style>
pages/list/list.nvue
浏览文件 @
097975d9
...
...
@@ -7,10 +7,12 @@
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" @clear="clear" @click.native="searchClick"
<!-- 搜索栏 -->
<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 />
</
view
>
</
template
>
<view class="list">
<!-- 刷新页面后的顶部提示框 -->
<!-- 当前弹出内容没有实际逻辑 ,可根据当前业务修改弹出提示 -->
...
...
@@ -58,7 +60,11 @@
<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: '',
...
...
@@ -233,8 +239,6 @@
// 默认加入 scoped ,所以外面加一层提升权重
.list {
margin-top: 52px;
.uni-list--waterfall {
/* #ifndef H5 || APP-VUE */
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录