主要是记录下遇到的几个问题。。。。小程序的上拉加载更多和轮播图的实现
完整项目地址
https://gitee.com/gdhsxuan/personal_tk/
小程序二维码:
完成效果
1、上拉加载更多
首先要在.json文件中将enablePullDownRefresh声明为true,然后js文件中有个onReachBottom函数,逻辑就写在这个函数里
js中的代码
// pages/cos/cos.js
Page({
/**
* 页面的初始数据
*/
data: {
page: 1,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: '接口地址',
data: {
page: that.data.page
},
header: {
'content-type': 'application/json'
},
method: 'GET',
success: function (res) {
console.log(res.data);
that.setData({
"result": res.data.res,
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
})
// 页数+1
var pages = that.data.page + 1;
console.log(pages)
wx.request({
url: '接口地址',
data: {
"page": pages
},
method: "GET",
// 请求头部
header: {
'content-type': 'application/text'
},
success: function (res) {
//console.log(res.data.res.length);
var result = that.data.result;
for (var i = 0; i < res.data.res.length; i++) {
result.push(res.data.res[i]);
}
console.log(result);
// 设置数据
that.setData({
result: result,
page: pages
})
// 隐藏加载框
wx.hideLoading();
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
展示页面使用了weui框架,采用flex布局
wxml文件
<view class="page">
<view style='font-size:26px;margin-left:15px'>cos</view>
<view class="weui-flex" wx:for="{{result}}" wx:for-item="item">
<view class="weui-flex__item" wx:for="{{item}}" wx:for-item="src" >
<navigator url="../detail/detail?link={{src[1]}}&text={{src[2]}}">
<image wx:if="{{src[0]}}" style="width:99%;" mode="aspectFill" src="{{src[0]}}">
</image>
<view class="weui-media-box__desc" style="margin-bottom:10px;margin-left:10px;margin-right:10px;font-size:32rpx;">{{src[2]}}</view>
</navigator>
</view>
</view>
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
</view>
2、首页的轮播图
轮播图中的图片地址也可以使用wx.request请求后台获取。。当然也可以写死
index.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
page:1,
movies: [
{ url: 'http://wx1.sinaimg.cn/large/d030806aly1fuss9hwyo4j21jk2b97nz.jpg' },
{ url: 'http://wx1.sinaimg.cn/large/d030806aly1fug91w3gtwj21jk2bc7wh.jpg' },
{ url: 'http://wx1.sinaimg.cn/large/d030806aly1fu3c28qyrcj21jk0v9dpj.jpg' },
{ url: 'http://wx4.sinaimg.cn/large/d030806aly1fjnhxvv4zvj21kw11xqbg.jpg' },
{ url: 'http://wx4.sinaimg.cn/large/d030806aly1fr3xjblscjj21jk15ogxz.jpg' },
{ url: 'http://wx4.sinaimg.cn/large/d030806aly1filhxnk9njj211x1kwq9b.jpg' }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
wxml文件代码
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2500" duration="1000">
<block wx:for="{{movies}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
swiper的组件参数
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | Boolean | false | 是否显示面板指示点 |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | Color | 000000 | 当前选中的指示点颜色 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前所在页面的 index |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 500 | 滑动动画时长 |
circular | Boolean | false | 是否采用衔接滑动 |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current} |