1.
~~~
//使用页面
data: {
/* 是否加载更多数据 */
more:0
},
//当到达底部时随机生成一个随机数 然后将随机数传给子组件 在子组件中有一个observed属性表示只用值发生改变就会触发该函数 （监听传来的值改变）
~~~
properties: {
more: {
type: Number,
observer: '_loadMore'
}
},
~~~
onReachBottom(){
this.setData({
more:Math.random()
})
}
<v-search wx:if="{{isSearch}}" bind:cancel="onCancel" more="{{more}}"></v-search>
~~~
~~~
//组件中的js
// components/search/index.js
import {
KeywordModel
} from "../../models/keyword";
import {
BookModel
} from "../../models/book";
import {
paginationBev
} from "../behaviors/pagination";
const keywordModel = new KeywordModel();
const bookModel = new BookModel();
Component({
/**
* 组件的属性列表
*/
properties: {
more: {
type: Number,
observer: '_loadMore'
}
},
behaviors: [paginationBev],
/**
* 组件的初始数据
*/
data: {
history_words: [],
hot_words: [],
clear: false,
value: null,
/* 是否显示搜索结构 */
isSearch: false,
/* 表示是否向服务器在发送请求 */
loading: false,
},
/**
* 组件的方法列表
*/
attached() {
this.setData({
history_words: keywordModel.getHistory()
})
keywordModel.getHot().then(res => {
this.setData({
hot_words: res.hot
})
})
},
methods: {
_loadMore() {
let length = this.getCurrentStart();
/* 在开始请求之前loading设置为true */
/* 只有有关键词的情况下,才触发搜索 */
if (this.data.value && this.hasMore()) {
/* 自定义下拉滚动 */
/* 下拉出现 */
this._showLoading();
bookModel.search(length, this.data.value).then(res => {
this.setMoreData(res.books);
/* 数据加载完成隐藏 */
this._hideLoading();
},err=>{
this._hideLoading();
})
}
},
onConfirm(e) {
// this.initialize();
wx.showLoading();
this._showResult();
const value = e.detail.value || e.detail.text;
bookModel.search(0, value).then(res => {
this.setMoreData(res.books);
this.setTotal(res.total);
if(res.total == 0){
this.setData({
noneResult:true
})
}
/* 只有在服务器中能够被搜索到的关键词才放入缓存中 */
keywordModel.addToHistory(value);
this.setData({
value,
history_words:keywordModel.getHistory()
})
wx.hideLoading();
})
},
_showLoading(){
this.setData({
loading:true
})
},
_hideLoading(){
this.setData({
loading:false
})
},
_showResult(){
this.setData({
isSearch:true
})
},
onCancel(e) {
this.triggerEvent('cancel', {})
},
onFocus() {
this.setData({
clear: true
})
},
onBlur() {
this.setData({
clear: false
})
},
onClear() {
this.setData({
value: "",
isSearch:false
})
this.initialize();
}
}
})
~~~
~~~
//组件中公共的 behaviors
const paginationBev = Behavior({
data:{
books:[],
/* 服务器返回数据的总记录数 */
total:0,
noneResult:false
},
methods:{
setMoreData(dataArray){
const tempArray = this.data.books.concat(dataArray);
this.setData({
books:tempArray
})
},
getCurrentStart(){
return this.data.books.length;
},
hasMore(){
if(this.data.books.length>=this.data.total){
return false
}else{
return true
}
},
setTotal(total){
this.data.total = total;
if(total==0){
this.setData({
noneResult:true
})
}
},
initialize(){
this.setData({
books:[],
noneResult:false
})
this.data.total = null;
}
}
})
export {paginationBev};
<v-loading wx:if="{{loading}}"></v-loading>
<view class="noneResult" wx:if="{{noneResult}}">没有搜索到任何结果</view>
~~~
- 前期准备
- 软件安装配置
- 语法 以及 功能 的实现
- 小程序中的 轮播
- 翻转轮播
- 实现 跳转 页面
- 详谈 跳转页面
- for 循环 渲染 页面（重点）
- 点击 改变 元素内容
- 功能 封装(创建、使用 模板）（重点）
- js模块化（重点）
- if-else实现 三目运算
- 底部导航栏tabBar 实现
- 小程序中的 函数调用 方法
- 小程序中的 block 包裹元素
- 小程序中的 hover事件
- import 标签(重点）
- 其他
- 在本地模拟接口取数据
- 点击跳转 并将该元素的id一起传递给跳转的页面
- 点击详情页显示
- 点击事件（bindtap/catchtap）
- 图片的mode属性
- 跳转页面时实现顶部显示页面标题
- hello world
- 将豆瓣服务器接口设置在本地
- 组件
- 地图
- 下拉刷新
- 数据加载 loading...
- 动态设置导航（title设置）
- 实现js代码的模块化
- 传参
- 组件中的生命周期函数
- 实战
- 发送http请求
- 可用的豆瓣接口
- 处理豆瓣列表页的数据
- 从接口上取数据渲染到页面上1
- 从接口上取数据渲染页面实现瀑布流2
- 瀑布流
- 音乐播放
- 文章详情页
- 音乐播放组件
- 音乐播放 最终版
- 电影（封装取数据渲染）
- 分享与收藏
- 搜索框
- 将电影列表数据放缓存
- 零碎知识点
- 谈组件
- 请求封装 （重点）
- 实现简单需求的请求失败的封装
- 使用class实现显示各种错误信息
- 再次封装带class的请求实现改变里面给的url
- 使用promise 封装http
- promise
- generator
- 01.介绍
- 02. 基本
- 03. 实例
- 04.yield
- asyns
- 01. 介绍
- 02. 使用
- 03. 取豆瓣
- 子组件（模板文件）接收父组件传来的参数并改变其值
- 模块化
- 在模板中提取相同的部分behavior
- 字符串与数组之间的转换
- 子组件向父组件传参
- 谈 triggerEvent
- 整体展示
- 父组件向子组件传wxml （在两个组件比较相似的情况 定义卡 槽传 wxml）
- 传css （在父组件中定义子组件的样式）
- 使用wxs给wxml传js
- 点赞
- 小程序中的正则
- 组件中实现下拉刷新
- 用户授权
- 组件点击图片获取信息
- 说明
- 小程序上下滑动