欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实战–集阅读与电影于一体的小程序项目(七)

程序员文章站 2022-04-06 12:25:13
27.实现上滑加载更多数据 movie grid template.wxml more movie.js 28.设置loading状态 more movie.js 29.实现下拉刷新 more movie.json more movie.js 30.电影搜索功能实现 movies.wxml movi ......

27.实现上滑加载更多数据

movie-grid-template.wxml

<import src="../movie/movie-template.wxml" />
<template name="moviegridtemplate">
  <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onscrolllower">
    <block wx:for="{{movies}}" wx:for-item="movie">
      <view class="single-view-container">
        <template is="movietemplate" data="{{...movie}}" />
      </view>
    </block>
  </scroll-view>
</template>

more-movie.js

var util = require('../../../utils/util.js')
var app = getapp();
page({
  data:{
    categorytitle: '',
    movies: {},
    requseturl: '',
    isempty: true,
    totalcount: 0
  },
  onload: function (options) {
    .
    .
    .
    this.data.requseturl = dataurl;
    util.http(dataurl, this.processdoubandata)
  },

  processdoubandata:function(data){
   .
   .
   .
   
    var totalmovies = {}
    if (!this.data.isempty) {
      totalmovies = this.data.movies.concat(movies)
    } else {
      totalmovies = movies
      this.data.isempty = false
    }
    this.setdata({
      movies: totalmovies
    })
    this.data.totalcount += 20;
  },

  onscrolllower:function(event){
    var nexturl = this.data.requseturl + 
    "?start=" + this.data.totalcount + "&count=20";
    util.http(nexturl,this.processdoubandata)
  },

28.设置loading状态

more-movie.js

onscrolllower: function (event) {
    var nexturl = this.data.requseturl +
      "?start=" + this.data.totalcount + "&count=20";
    util.http(nexturl, this.processdoubandata);
    wx.shownavigationbarloading()
  },
  
  processdoubandata:function(data){
    .
    .
    
    this.setdata({
      movies: totalmovies
    })
    this.data.totalcount += 20;
    wx.hidenavigationbarloading()
  },

29.实现下拉刷新

more-movie.json

{
  "enablepulldownrefresh": true
}

more-movie.js

onpulldownrefresh: function () {
    var refreshurl = this.data.requseturl +
      "?star=0&count=20";
    this.data.movies = {};
    this.data.isempty = true;
    this.data.totalcount = 0;
    util.http(refreshurl, this.processdoubandata);
    wx.shownavigationbarloading();
  },

  processdoubandata:function(data){
    .
    .
    .
    this.data.totalcount += 20;
    wx.hidenavigationbarloading()
    wx.stoppulldownrefresh()
  },

30.电影搜索功能实现

movies.wxml

<import src="movie-list/movie-list-template.wxml" />
<import src="movie-grid/movie-grid-template.wxml" />
<view class="search">
  <icon type="search" class="search-img" size="13" color="#405f80"></icon>
  <input type="text" placeholder="西虹市首富" placeholder-class="placeholder" bindfocus="onbindfocus" bindconfirm="onbindblur"/>
   <image wx:if="{{searchpanelshow}}" src="/images/icon/xx.png" class="xx-img" bindtap="oncancelimgtap"></image> 
</view>
.
.

<view class="search-panel" wx:if="{{searchpanelshow}}">
    <template is="moviegridtemplate" data="{{...searchresult}}"/>
</view>

movies.wxss

@import "movie-grid/movie-grid-template.wxss";

.search {
  background-color: #f2f2f2;
  height: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.search-img {
  margin: auto 0 auto 20rpx;
}

.search input {
  height: 100%;
  width: 600rpx;
  margin-left: 20px;
  font-size: 28rpx;
}

.placeholder {
  font-size: 14px;
  color: #d1d1d1;
  margin-left: 20rpx;
}

.search-panel{
    position:absolute;
    top:80rpx;
}

.xx-img{
    height: 30rpx;
    width: 30rpx;
    margin:auto 0 auto 10rpx;
}

movies.js

page({
  data: {
    intheaters: {},
    comingsoon: {},
    top250: {},
    searchresult: {},
    containershow: true,
    searchpanelshow: false
  },

    onbindfocus: function (event) {
    this.setdata({
      containershow: false,
      searchpanelshow: true
    })
  },
  oncancelimgtap: function (event) {
    this.setdata({
      containershow: true,
      searchpanelshow: false,
      searchresult: {}
    })
  },
  
  onbindblur: function (event) {
    var text = event.detail.value
    var searchurl = app.globaldata.g_baseurl + "/v2/movie/search?q=" + text;
    this.getmovielist(searchurl, "searchresult", "");
  },
    

结果

微信小程序实战–集阅读与电影于一体的小程序项目(七)