// 如果是全局配置app.json,需要在window的子属性配置 enablePullDownRefresh
// 这样配置,所有的页面都支持下拉动作
"window": {
"navigationBarBackgroundColor": "#e54847",
"navigationBarTitleText": "猫眼电影",
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": true
},
// 如果是页面配置page.json,那么只有当前页面支持下拉动作
// 页面配置直接就是跟属性配置
{
"enablePullDownRefresh": true
}
Page({
// 监听页面的下拉事件
onPullDownRefresh: function() {
console.log('下拉动作触发...')
// 这里就可以调用后台接口
}
});
onReachBottomDistance
{
"enablePullDownRefresh": true,
//距离底部的距离 达到多少时开始加载数据
"onReachBottomDistance": 50
}
页面触底时触发的事件函数
// 监听页面触底事件
onReachBottom: function() {
console.log('页面滚动到了底部...')
}
<view class="tabs" bind:tap='changeTab'>
<text data-index='1' class='{
{currentTab===1?"current":""}}'>热映text>
<text data-index='2' class='{
{currentTab===2?"current":""}}'>待映text>
view>
// 事件处理函数-控制Tab切换
changeTab: function(e) {
// 获取Tab标题的索引
var index = e.target.dataset.index
// console.log(typeof index)
// 更新currentTab的值
this.setData({
currentTab: parseInt(index)
})
},
// 这种方式控制的是动态添加或者删除标签,性能不太好,类似于vue中的v-if
<view class="items hots" wx:if='{
{currentTab===1}}'>
<view class="items-wrap" wx:if='{
{currentTab===2}}'>
// 通过这种方式控制的是标签的display样式,性能要更好一些,类似于vue中的v-show
<view class="items hots" hidden='{
{currentTab!==1}}'>
<view class="items-wrap" hidden='{
{currentTab!==2}}'>
onLoad: function() {
// 这里可以调用接口获取数据
wx.request({
url: 'https://wx.maoyan.com/mmdb/movie/v2/list/hot.json',
data: {
//从第几条开始查询
offset: 0,
//每页查询多少条数据
limit: 10,
//筛选条件
ct: '北京'
},
method: 'GET',
success: (res) => {
// console.log(res)
// 获取热映列表数据
var hots = res.data.data.hot
// 更新data中的数据
this.setData({
hots: hots
})
}
})
}
// 替换图片真实的路径
info.data.data.hot.forEach(function (val) {
//接口数据的图片宽高 设置为具体数值
val.img = val.img.replace('w.h', '128.180');
});
// 第二种用法
hots = hots.map(item=>{
//接口数据的图片宽高 设置为具体数值
item.img = item.img.replace('w.h', '128.180')
return item
})
<navigator wx:for="{
{hots}}" wx:key="id" url="./detail">
<view class="item">
<text class="play">text>
<image src="{
{item.img}}">image>
<view class="meta">
<text class="name">{
{item.nm}}text>
<text class="type">{
{item.cat}}text>
<text class="actor">{
{item.desc}}text>
<text class="count">{
{item.showInfo}}text>
view>
<view class="status">
<block wx:if="{
{item.preSale == 0}}">
<view class="extra">
{
{item.mk}}<text>分text>
view>
<text class="btn">购票text>
block>
<block wx:else>
<view class="extra">
{
{item.wish}}<text>人想看text>
view>
<text class="btn presell">预售text>
block>
view>
view>
navigator>
// 显示加载提示
wx.showLoading({
title: '正在加载..',
//是否添加透明蒙层
mask: true
})
// 加载成功,隐藏提示效果
wx.hideLoading()
onReachBottom: function () {
// 页面滚动到底部的时候触发
// console.log('bottom')
// 触底时应该加载下一页数据
this.setData({
offset: this.data.offset + this.data.limit
})
this.loadData()
}
this.setData({
// 把新请求的一页数据追加到原有的数组列表中
//即:...作用——把原数组和新数组的数据都进行拆开,然后合并到一个数组中
list: [...this.data.list, ...hot]
})