微信小程序宠物论坛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% }