[Vue学习]基于uni-app的＜unicloud-db＞标签的简单小程序

 今天基于vue的框架uin-app简单的实现了一下微信小程序上的列表查询。

数据库使用的是Dloud的云端数据库，主要实现的功能就是从数据库中查询并将用户的姓名和对应图片展示出来。

先上代码：

<template>
  <view class="content">
	  <view class="topview viewbac">
	  	<input id="selin" v-model="value" class="insty" placeholder="请输入搜索内容"/>
	  	<button class="inbut" @click="sel">搜索</button>
	  </view>
	  <view class="midview viewbac">
	  <unicloud-db
	  	ref="udb"
	  	v-slot:default="{data,pagination,loading,error,options}"
	  	:options="options"
	  	orderby="id asc"
	  	collection="qrmessage"
	  	:page-size="pagesize"
	  	page-data="replace"
	  	getcount="true"
	  	:where="selcart"
		@load="onqueryload"
		@error="onqueryerror">
      <view v-if="error" class="error">{{error.errMsg}}</view>
      <view v-else class="list">
          <uni-table :loading="loading"  style="width: 100%;" >
          	<uni-tr style="background-color: #24bcc1; border-radius: 5px;">
          		<uni-th style="color: white;" width="50%" align="center">姓名</uni-th>
          		<uni-th style="color: white;" width="50%" align="center">图标</uni-th>
          	</uni-tr>
          	<uni-tr style="width: 100%;" v-for="(item, index) in data" :key="index" class="list-item">
				<uni-td style="font-size: 16px;" width="50%" align="center" @click="open(item.icon)" >
					<view @click="open(item.icon)">
						{{ item.name }}
					</view>
				</uni-td>
          		<uni-td align="center" width="50%" @click="open(item.icon)">
					<view @click="open(item.icon)">
						<image :src="item.icon" mode="aspectFill" style="width: 30px;height: 30px;"/>
						<view>
							<uni-popup ref="img" type="center">
								<image :src="item.icon" mode="aspectFit"/>
							</uni-popup>
						</view>
					</view>
          		</uni-td>
          	</uni-tr>
          </uni-table>
      </view>
      <view class="loading" v-if="loading">加载中...</view>
      <!-- 分页组件 -->
      <uni-pagination show-icon :page-size="pagination.size" :total="pagination.count" @change="onpagination" />
    </unicloud-db>
	</view>
  </view>
</template>

下面是js代码：

<script>
  export default {
	watch:{},
    data() {
      return {
        options: {}, // 插槽不能访问外面的数据，通过此参数传递, 不支持传递函数
		pagesize: 8,
		selcart:'',
		value:'',
      }
    },
    onPullDownRefresh() { //下拉刷新（一般此场景下不使用下拉刷新）
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    methods: {
      onqueryload(data, ended) {
        // 可在此处预处理数据，然后再渲染界面
      },
      onqueryerror(e) {
        // 加载数据失败
      },
      onpagination(e) {
		  this.$refs.udb.clear() //udb为unicloud-db组件的ref属性值
        this.$refs.udb.loadData({
          current: e.current
        })
      },open(i) {
				  	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				 //  	this.$refs.img[2].open();
					// console.log(i);
					wx.previewImage({
										urls: [i], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
										current: '', // 当前显示图片的http链接，默认是第一个
										success: function(res) {},
										fail: function(res) {},
										complete: function(res) {},
									})
				},
		onpagination(e) {
					console.log(e);
					this.current = e.current;
				        this.$refs.udb.loadData({
				          current: e.current
				        })
				},
		sel(){
					// console.log()
					if(!this.value==''){
						this.selcart = "/"+this.value+"/i.test(name)"
						this.value = null
						}
					else{
						this.selcart = ''
						}
				}
    }
  }
</script>

 css代码：

<style>
  .list-item {
    background-color: #fff;
    margin-bottom: 1px;
    padding: 30px 15px;
	font-size: 18px;
  }

  .loading {
    padding: 20px;
    text-align: center;
  }

  .error {
    color: #DD524D;
  }
  .topview{
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	padding: 3px;
  	margin: 8px;
  	/* position: sticky;
  	top:50px;
  	z-index: 1000; */
  }
  .insty{
  	border: 1px solid #afafaf;
  	margin:0 5px;
  	width: 100%;
  	background-color: white;
  	border-radius: 5px;
  	padding: 3px 0;
  	padding-left: 5px;
  }
  .inbut{
  	flex-basis:1;
  	font-size: small;
  	font-weight: 600;
  	width: 100px;
  	margin: 0 5px;
  	background-color: #24bcc1;
  	color: white;
  }
  .inbut:active{
  	background-color: #198c8c;
  }
  .inbut:checked{
  	background-color: #1EA3A3;
  }
  .midview{
  	padding: 5px;
  	margin-top: 10px;
  	margin: 0 8px;
  }
  .pagsty{
  	background-color: white;
  	;
  }
  .viewbac{
  	background-color: #ffffff;
  	box-shadow: 1px 1px 1px 1px #9e9e9e;
  	border-radius: 5px;
  }
</style>

效果图：

 uni-pagination分页组件的颜色需要去组件的pagination.vue中去修改。

点击图片放大

再点击一次图片就会消失，使用的uni-popup组件。

搜索效果

 整个项目主要依赖uni-app提供的一个非常好用的标签<unicloud-db></unicloud-db>，它可以替代JQL语句云数据库搜索。

关于这个标签的使用文档在链接https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=unicloud-db%e7%bb%84%e4%bb%b6%e7%ae%80%e4%bb%8b