微信小程序仿微信功能扩展（加载数据、搜索框）

加载数据以及搜索框的实现

1.wxml

<view class="searchbox">
  <input maxlength="15" bindinput="search" placeholder="请输入搜索" value="{{val}}" />
  <icon type="search" wx:if="{{isSearch}}" />
  <icon type="clear" wx:if="{{isClear}}" bind:tap="clearTab"/>
</view>
<!-- 列表渲染 -->
<view class="box" style="{{bdcolor}}" wx:for="{{array}}" wx:for-item="arritem" wx:for-index="arrindex" data-key1="{{arrindex}}" bindtap="click">
  <view class="tx">
    <view class="tx-dot" wx:if="{{arritem.dot>0}}">
      <text wx:if="{{arritem.dot>1&&arritem.dot<=99}}" class="tx-dot-1">{{arritem.dot}}</text>
      <text wx:if="{{arritem.dot>99}}" class="tx-dot-99">99+</text>
    </view>
    <block>
      <image src="{{arritem.imgurls}}" class="img-1" />
    </block>
  </view>
  <view class="box1">
    <text class="time">{{arritem.time}}</text>
    <text class="text1">{{arritem.text1}}</text>
    <text class="text2">{{arritem.text2}}</text>
  </view>
</view>

2.wxss

/* pages/test/test.wxss */
.box{
  width: 100%;
  margin: 0 auto;
  border-bottom:2rpx solid	#D3D3D3;
  display: flex;
  flex-direction: row;
  padding: 25rpx 25rpx;
}
.box1{
  width: 580rpx;
  overflow: hidden;
  position: relative;
}
.box1 .time{
  color: #B0B0B0;
  position: absolute;
  right: 0rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}
.box .tx{
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 5%;
  background-color: #DADFDE;
  margin-right: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}
.box:nth-of-type(2n){
  background-color: rgba(237,237,237, .6);
}
.box .tx .img-1{
  width: 100%;
  height: 100%;
}
.box .tx image{
  width: 30rpx;
  height: 30rpx;
  border-radius: 5%;
}
.box .tx .tx-dot{
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  text-align: center;
  color: white;
  font-size: 18rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .tx .tx-dot .tx-dot-99{
  font-size: 15rpx;
}
.box .text1{
  display: block;
  color: black;
  font-weight: bold;
  font-size: 26rpx;
  line-height: 60rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box .text2{
  display: block;
  color: #B0B0B0;
  font-size: 20rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.searchbox{
  width: 600rpx;
  display: flex;
  border: 2rpx solid	#C0C0C0;
  border-radius: 10px;
  align-items: center; 
  margin: 30rpx auto;
}
.searchbox input{
  width: 600rpx;
  height: 60rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
}

3.js
定义全局变量：var current = 1;
为列表定义点击事件： click

带参跳转：wx.navigateTo({
url: ‘/pages/Details/Details?index=’ + index
})

// pages/test/test.js
var current = 1;
Page({
//列表点击事件
  click: function (event) {
    var index = event.currentTarget.dataset.key1;
    // console.log(index)
    wx.navigateTo({
      url: '/pages/Details/Details?index=' + index
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    array: [],
    isSearch:true,
    isClear:false,
    val:''
  },
  // 上拉加载下拉刷新
  initialData: function () {
    var list = this.data.array;
    var newlist = [];
    for (let i = 0; i < 10; i++) {
      newlist.push(
        {
          id: i,
          imgurls: "/image/2.jpg",
          dot: i,
          time: "19:10",
          text1: "这是新增的数据" + i,
          text2: "座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师",
        }
      )
      list.push(newlist[i]);
    }
    this.setData({
      array: list
    })
    current=1;
  },
  loadData: function () {
    var page = current;
    current++;
    var list = this.data.array;
    for (let i = page * 10; i < current * 10; i++) {
      list.push(
        {
          id: i,
          imgurls: "/image/2.jpg",
          dot: i,
          time: "19:10",
          text1: "这是新增的数据" + i,
          text2: "座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师",
        }
      )

    }
    this.setData({
      array: list
    })
  },
  refreshData: function () {
    var list = [];
    var newlist = [];
    for (let i = 0; i < 10; i++) {
      newlist.push(
        {
          id: i,
          imgurls: "/image/2.jpg",
          dot: i,
          time: "19:10",
          text1: "这是新增的数据" + i,
          text2: "座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师座又杨威:好的,谢谢老师",
        }
      )
      list.push(newlist[i]);
    }
    this.setData({
      array: list
    })
  },
  // 搜索
  search: function (event) {
    var list = this.data.array;
    var text = event.detail.value;
    var newList = [];
    var novalue = [];
    if (text != "") {
      for (let i = 0; i < list.length; i++) {
        if (list[i].text1.indexOf(text) != -1 ) {
          newList.push(list[i])
        }
      }
      this.setData({
        array: newList,
        isSearch:false,
        isClear:true
      })
    }else{
      this.setData({
        isSearch:true,
        isClear:false,
        array:novalue  
      })
      this.initialData()
    }
  },
  clearTab:function(){
    var novalue = [];
    this.setData({
      val:'',
      isSearch:true,
      isClear:false,
      array:novalue 
    })
    this.initialData()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initialData();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    current = 1;
    this.refreshData();
    wx.stopPullDownRefresh()
    wx.showLoading({
      title: 'loging'
    })
    setTimeout(() => {
      wx.hideLoading()
    }, 800);


  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
    this.loadData()
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.hideTabBarRedDot({
      index: 0
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

搜索框功能：

循环查找数据，如果有就显示出来。

// 搜索
search: function (event) {
var list = this.data.array;
var text = event.detail.value;
var newList = [];
var novalue = [];
if (text != “”) {
for (let i = 0; i < list.length; i++) {
if (list[i].text1.indexOf(text) != -1 ) {
newList.push(list[i])
}
}
this.setData({
array: newList,
isSearch:false,
isClear:true
})
}else{
this.setData({
isSearch:true,
isClear:false,
array:novalue
})
this.initialData()
}
},

上拉加载下拉刷新可看其它文档。