首页 > 微信小程序 > 小程序开发 > 微信小程序搜索分页功能实现

微信小程序搜索分页功能实现

云罗郡主
发布: 2019-01-21 11:14:09
转载
5866 人浏览过

本篇文章给大家带来的内容是关于微信小程序搜索分页功能实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

  1. 这里以搜索歌曲为例:

    20190117170348478.png

    20190117170414378.png

前端:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<view class="search"

  <view class="search-bar"

    <view class="search-wrap"

        <icon type="search" size="16" class="icon-search" /> 

        <input type="text" placeholder="请输入搜索内容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" /> 

    </view> 

    <view class="search-cancel" bindtap="keywordSearch">搜索</view> 

  </view> 

  <view class="search-result"

    <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"

      <view class="result-item" wx:for="{{searchSongList}}" wx:key="unique"  data-data="{{item}}"

        <view class="icon{{item.isonly==&#39;0&#39; ? &#39; nocopyright&#39; : &#39;&#39;}}"></view> 

        <text class="title">{{item.SongName}}--{{item.SingerName}}</text> 

        <view class="subtitle"

          <text>{{item.SingerName}}</text> 

        </view> 

      </view> 

      <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view> 

      <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view> 

    </scroll-view>   

  </view> 

</view>

登录后复制

样式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

page{ 

  display: flex; 

  flex-direction: column; 

  height: 100%; 

   

/*搜索*/ 

.search{ 

  flex: auto; 

  display: flex; 

  flex-direction: column; 

  background: #fff; 

.search-bar{ 

  flex: none; 

  display: flex; 

  align-items: center; 

  justify-content: space-between; 

  padding: 20rpx; 

  background: #f4f4f4; 

.search-wrap{ 

  position: relative; 

  flex: auto; 

  display: flex; 

  align-items: center; 

  height: 80rpx; 

  padding: 0 20rpx; 

  background: #fff; 

  border-radius: 6rpx; 

.search-wrap .icon-search{ 

  margin-right: 10rpx; 

.search-wrap .search-input{ 

  flex: auto; 

  font-size: 28rpx; 

.search-cancel{ 

  padding: 0 20rpx; 

  font-size: 28rpx; 

   

/*搜索结果*/ 

.search-result{ 

  flex: auto; 

  position: relative; 

.search-result scroll-view{ 

  position: absolute; 

  bottom: 0; 

  left: 0; 

  right: 0; 

  top: 0; 

.result-item{ 

  position: relative; 

  display: flex; 

  flex-direction: column; 

  padding: 20rpx 0 20rpx 110rpx; 

  overflow: hidden; 

  border-bottom: 2rpx solid #e5e5e5; 

   

.result-item .media{ 

  position: absolute; 

  left: 16rpx; 

  top: 16rpx; 

  width: 80rpx; 

  height: 80rpx; 

  border-radius: 999rpx; 

.result-item .title, 

.result-item .subtitle{ 

  overflow: hidden; 

  text-overflow: ellipsis; 

  white-space: nowrap; 

  line-height: 36rpx; 

.result-item .title{ 

  margin-bottom: 4rpx; 

  color: #000; 

.result-item .subtitle{ 

  color: #808080; 

  font-size: 24rpx; 

.result-item:first-child .subtitle text{ 

  margin-right: 20rpx; 

.result-item:not(:first-child) .subtitle text:not(:first-child):before{ 

  content: &#39;/&#39;; 

  margin: 0 8rpx; 

.loading{ 

  padding: 10rpx; 

  text-align: center; 

.loading:before{ 

  display: inline-block; 

  margin-right: 5rpx; 

  vertical-align: middle; 

  content: &#39;&#39;; 

  width: 40rpx; 

  height: 40rpx; 

  /* background: url(../../images/icon-loading.png) no-repeat;   */

  background-size: contain; 

  animation: rotate 1s linear infinite; 

.loading.complete:before{ 

  display: none; 

}

登录后复制

js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

var util = require(&#39;../../utils/util.js&#39;)

Page({

  data: {

    searchKeyword: &#39;&#39;,  //需要搜索的字符 

    searchSongList: [], //放置返回数据的数组 

    isFromSearch: true,   // 用于判断searchSongList数组是不是空数组,默认true,空的数组 

    searchPageNum: 1,   // 设置加载的第几次,默认是第一次 

    callbackcount: 15,      //返回数据的个数 

    searchLoading: false, //"上拉加载"的变量,默认false,隐藏 

    searchLoadingComplete: false  //“没有数据”的变量,默认false,隐藏 

  },

  //输入框事件,每输入一个字符,就会触发一次 

  bindKeywordInput: function (e) {

    console.log("输入框事件")

    this.setData({

      searchKeyword: e.detail.value

    })

  },

  //搜索,访问网络 

  fetchSearchList: function () {

    let that = this;

    let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数 

      searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数 

      callbackcount = that.data.callbackcount; //返回数据的个数 

    //访问网络 

    util.getSearchMusic(searchKeyword, searchPageNum, callbackcount, function (data) {

      console.log(data)

      //判断是否有数据,有则取数据 

      if (data.status != 0) {

        let searchList = [];

        //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加 

        that.data.isFromSearch ? searchList = data.data.lists : searchList = that.data.searchSongList.concat(data.data.lists)

        that.setData({

          searchSongList: searchList, //获取数据数组 

           //存放歌手属性的对象 

          // searchLoading: true   //把"上拉加载"的变量设为false,显示 

        });

        //没有数据了,把“没有数据”显示,把“上拉加载”隐藏 

      } else {

        that.setData({

          searchLoadingComplete: true, //把“没有数据”设为true,显示 

          searchLoading: false  //把"上拉加载"的变量设为false,隐藏 

        });

      }

    })

  },

  

//点击搜索按钮,触发事件 

  keywordSearch: function (e) {

    this.setData({

      searchPageNum: 1,   //第一次加载,设置1 

      searchSongList: [],  //放置返回数据的数组,设为空 

      isFromSearch: true,  //第一次加载,设置true 

      searchLoading: true,  //把"上拉加载"的变量设为true,显示 

      searchLoadingComplete: false //把“没有数据”设为false,隐藏 

    })

    this.fetchSearchList();

  },

  //滚动到底部触发事件 

  searchScrollLower: function () {

    let that = this;

    if (that.data.searchLoading && !that.data.searchLoadingComplete) {

      that.setData({

        searchPageNum: that.data.searchPageNum + 1,  //每次触发上拉事件,把searchPageNum+1 

        isFromSearch: false  //触发到上拉事件,把isFromSearch设为为false 

      });

      that.fetchSearchList();

    }

  }

})

登录后复制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function getSearchMusic(keyword, pageindex, callbackcount, callback) {

  wx.request({

    url: &#39;http://songsearch.kugou.com/song_search_v2&#39;,

    data: {

keywords:&#39;庄心妍&#39;,

clientver:&#39;=& platform=WebFilter&#39;

    },

    // method: &#39;post&#39;,

    header: { &#39;content-Type&#39;: &#39;application/json&#39; },

    success: function (res) {

      // console.log(res)

      if (res.statusCode == 200) {

        callback(res.data);

      }

    }

  }

  }

登录后复制

以上就是对微信小程序搜索分页功能实现的全部介绍,如果您想了解更多有关小程序开发教程,请关注PHP中文网。

以上是微信小程序搜索分页功能实现的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板