【小程序】（桂工微拍）搜索结果页

1、页面效果

 

 2、页面代码

2-1、wxml代码

<view class="container">
  <scroll-view class="main" scroll-y="true">
    <block wx:for="{{goods}}" wx:key="index">
      <view class="goods">
        <view class="img">
          <image src="{{item.images[0]}}"></image>
        </view>
        <view class="title">
          <text style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.name}}</text>
          <view>
            <image src="/image/price.png" style="width: 30rpx;height: 30rpx;"></image>
            <text style="color: crimson;">{{item.start_price}}</text>
            <image src="/image/guankanliang.png" style="width: 30rpx;height: 30rpx;margin-left: 30rpx;"></image>
            <text>{{item.clicks}}</text>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
</view>

2-2、wxss代码

.container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main{
  position: fixed;
  display: flex;
  align-items: center;
  top: 1%;
  height: 98%;
  width: 100%;
  border-radius: 10rpx;
}
.goods{
  position: relative;
  width: 47%;
  height: 30%;
  margin: 10rpx;
  float: left;
}
.img{
  position: relative;
  height: 73%;
}
.img image{
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
}
.title{
  margin: 5%;
}

3、js代码

// pages/searchRes/searchRes.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let keyWord = options.keyWord
    console.log(keyWord)
    //查询数据库
    wx.cloud.database().collection('goods').where({
      name: wx.cloud.database().RegExp({
        regexp: '.*' + keyWord + '.*',     //根据keyWord模糊查询
        options: 'i'                       //不区分大小写
      })
    }).get({
      success: (res) => {
        console.log(res)
        this.setData({
          goods: res.data
        })
      }
      
    })
  },

})