Skip to content

U
uni-starter

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

Fork自 DCloud / uni-starter

通知 1
Star 1
Fork 0
U
uni-starter

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

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

搜索栏整理

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