ufutx_love_mp/src/pages/dynamic/searchPopular.wpy

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
  background-color: #ffffff;
}

.ui-search{
  width: 100vw;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 22;
}

.searchIcon{
  width: 27rpx;
  height: 27rpx;
  margin: 0 20rpx;
}

.main {
  padding: 100rpx 30rpx 60rpx 30rpx;
  background: #ffffff;
  .cu-list {
    .cu-item {
      position: relative;
      display: block;
      height: 200rpx;
      .cu-avatar.lgs {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8px;
        left: 0;
        font-size: 2em;
      }
      .content {
        position: absolute;
        left: 176rpx;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        border-bottom: 1rpx solid #f5f5f5;
        .title {
          height: 44rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: #333333;
          line-height: 44rpx;
          margin-top: 10rpx;
        }
        .mains {
          height: auto;
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
          margin-top: 12rpx;
        }
        .num {
          height: 36rpx;
          font-size: 26rpx;
          color: #666666;
          line-height: 36rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  .cu-list {
    margin: 30rpx 0;
  }
}
</style>
<template>
  <view class="ui-searchPopular">
    <view class="cu-bar ui-search bg-white">
      <view class="search-form round">
        <image class="searchIcon" src="https://images.ufutx.com/202102/26/4081d59162d4a38736c323ed7fffd3db.png" alt=""></image>
        <input type="text" placeholder="搜索话题" confirm-type="search" bindinput="inputTyping" />
      </view>
    </view>
    <view class="main">
      <block v-for="(item,index) in list" :key="index">
        <view class="cu-list menu-avatar">
          <view class="cu-item" @tap="jumpPath(item.id)">
            <view class="cu-avatar round lgs" style="{{'background-image:url(' + item.back_image + ');'}}"></view>
            <view class="content flex-sub">
              <view class="title"># {{item.name}}</view>
              <view class="mains ellipsis_1">{{item.info}}</view>
              <view class="num"><span style="color:#333333;">{{item.quote_num}}</span> 条动态</view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <pageScroll ref="pageScroll"></pageScroll>
</template>

<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'

wepy.page({
  config: {},
  mixins: [https, base],

  data: {
    arr: [],
    no_more: false,
    loading: false,
    page: 1,
    list: [] // 列表数据
  },
  methods: {
    getList() {
      let vm = this
      let data = {
        page: vm.page
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/moment/topic/list`, data}).then(({code, data}) => {
        if (code === 0) {
          if (vm.list.length === 0 || vm.page === 1) {
            vm.list = data.data
            vm.arr = data.data
          } else {
            data.data.map(function (item) {
              vm.list.push(item)
              vm.arr.push(item)
            })
          }
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.no_more = true
          }
          setTimeout(() => {
            vm.loading = true
          }, 500)
          vm.page++
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    inputTyping(e) {
      let vm = this
      let key = e.$wx.detail.value
      if (key == '') {
        vm.list = vm.arr
      } else {
        vm.list = []
        vm.arr.forEach(ele => {
          if (ele.name.indexOf(key) >= 0) {
            vm.list = vm.list.concat([ele])
          }
        })
      }
    },
    jumpPath (id) {
      wx.navigateTo({
        url: `/pages/dynamic/hotTopic?id=${id}`
      })
    }
  },
  // 上拉获取更多数据
  onReachBottom() {
    let vm = this
    if (!vm.no_more) {
      vm.getList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    let vm = this
    vm.page = 1
    vm.no_more = false
    vm.getList()
  },
  onPageScroll(res) {
    let vm = this
    let top = res.scrollTop
    vm.$refs.pageScroll.showBackTopBtn = top > 380
  },
  onShow() {
  },
  onLoad() {
    let vm = this
    vm.getList()
  }
})
</script>
<config>
{
navigationBarTitleText: '热门话题',
enablePullDownRefresh: true,
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
pageScroll: '~@/components/pageScroll'
}
}
</config>