微信小程序宠物论坛5

微信小程序宠物论坛5

搜索模块

对帖子的标题进行模糊查询
界面如图

JS部分

// 初始化数据化
const db = wx.cloud.database({});
const cont = db.collection('post');

Page({
  data:{
   post:[],
   title:'',
  },
  formSubmit: function (e) {
    this.setData({
      title1: e.detail.value.find
    })
  },
  // 查询按钮
  find(e) {
    const title1 = this.data.title1
    console.log(title1)
    db.collection("post").where({	 	//collectionName 表示欲模糊查询数据所在collection的名
      title: db.RegExp({
        regexp: title1,
        options: 'i'
      })


    }).get({
      success: res=>{
        console.log(res.data)
        this.setData({
          post: res.data
        })
        
        const post = this.data.post
        console.log(post.length)
        if (post.length == "0") {
          wx.showModal({
            title: '查询结果',
            content: '无相关结果',
            success(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else {
         
        }

      },
    })

  },
 
})

WXML部分

  <view class="content">
    <form  bindsubmit="formSubmit">
      <view class="search">
         <input class="input" type="text" name="find" placeholder="帖子名称" form-type="submit"/> 
         <button class='find' form-type="submit" size="mini" bindtap="find">搜索</button>  
      </view>
    </form>  
 </view> 


<view class="main" wx:for="{{post}}" wx:key="post">
<!-- 帖子ID显示 -->
<navigator url="../detail/detail?id={{item._id}}" open-type="navigate" >
<!-- 标题显示 -->
  <view class="title">{{item.title}}</view>
  <view class="pic">
  <!-- 显示第一张图片 -->
  <image style="width:30%;height:69px;" src="{{item.images[0]}}"/>
  <!-- 头像，发帖人昵称，时间  -->
  <view class="userinfo" style="flex-direction:row">
    <image class="userinfo-avatar" src="{{item.heads}}" background-size="cover"></image>
    <text decode="{{true}}" class="userinfo-nickname">&nbsp;&nbsp;{{item.nickname}}</text>
    <text decode="{{true}}" class="userinfo-time">&nbsp;&nbsp;&nbsp;&nbsp;{{item.time}}</text> 
  </view>
</view>
<view class="line"></view>
</navigator>
</view>

WXSS部分

.content{
  padding-left: 4%;
  padding-right: 4%;
  background-color:rgb(0, 255, 200);
}
.input{
  position:relative;
  top:25rpx;
  height:25px;
  margin-right: 200rpx;  
  border:1px solid #130505;
}
.find{
  margin: 10rpx 10rpx 10rpx 10rpx;  
  z-index: 2;
  border:1px solid #130505;
  position:relative;
  left:500rpx;
  bottom:60rpx
}

.title{
  font-weight: bold;
}
.desc{
font-size:70%;
}

.userinfo-avatar {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  font-weight:bold;
  font-size:75%;
  color: black;
  margin-bottom:30px;
}
.userinfo-time{
 font-size:65%;
 padding-bottom:40px
}

.line {
  border: 1px solid #ccc;
  opacity: 0.2;
}

.main{
  padding-left: 4%;
  padding-right: 4%
}