微信小程序实战–集阅读与电影于一体的小程序项目(七)
时间:2018-08-19
本文章向大家介绍微信小程序实战–集阅读与电影于一体的小程序项目(七),需要的朋友可以参考一下
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", "");
},
结果
- Golang语言打印九九乘法表
- AVFoundation 框架初探究(四)
- Data Guard跳归档恢复的实践(r9笔记第92天)
- AVFoundation 框架初探究(三)
- AVFoundation 框架初探究(二)
- 关于视图和存储过程的权限问题探究 (r9笔记第87天)
- Java基础-day08-超市购物系统总结
- AVFoundation 框架初探究(一)
- 【Go 语言社区】 HTML5 前端--数据保存实例
- crontab设置导致的服务器进程异常问题 (r10笔记第4天)
- 一条SQL语句的执行计划变化探究(r10笔记第3天)
- tensorflow(一)windows 10 python3.6安装tensorflow1.4与基本概念解读
- 基于AgileEAS.NET SOA 中间件领域模型数据器快速打造自己的代码生成器
- Java基础-day07-代码题-自定义数据类型;ArrayList集合
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从零开始搭建 VuePress 静态博客
- 算法菜鸟的烂笔头
- 防火墙(iptables)
- 短视频商城源码,安卓几种弹窗方法
- Automl框架katib浅析
- NAS Network Attached Storage
- es6 随性学习之 字符串 String
- MongoDB内核:副本集选举过程分析
- MongoDB内核:主从同步之源码剖析
- OpenGL ES 帧缓冲区位块传送
- OAuth 2.0 单元测试解决方案
- 「性能提升」扩展 Spring Cache 支持多级缓存
- 如何以源码形式运行Nacos Server
- Spring Boot 2.4 配置文件将加载机制大变化
- OpenGL ES 多目标渲染(MRT)