用小程序完成简单的详情列表功能
Posted 她有多难忘
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用小程序完成简单的详情列表功能相关的知识,希望对你有一定的参考价值。
最近学习了微信小程序,写了一个详情列表
主要思路是:
1.先通过接口拿到数据,在onLoad(options)
中调用wx.request()
函数,获取到数据
2.完成数据渲染后,,用catchtab
给它绑定一个点击事件,点击的时候跳转路由同时把id传到详情页,调用另一个接口拿到详情数据
3.在以上工作都完成后,还有一个上拉触底获取到新数据更新到页面上的功能,在这个函数中再次调用获取数据时的代码,然后传一个页码,用来获取新的数据,把新的数据放到旧的数组里,就实现了。
具体如下
如下图:
在js文件中的 onLoad(options)
中调用wx.request()
函数该函数有两个必传的参数是,url(接口地址),method(传参方式有get和post两种)
,然后success:res=>
获取到数据
// 生命周期函数--监听页面加载
onLoad(options)
wx.request(
url: 'http://localhost:8989/getData',
method:"GET",
success:res=>
this.setData(
newList:res.data,
)
// console.log(res.data);
)
,
拿到数据后在页面上渲染,在小程序中渲染数据与vue不一样了,这里要用wx:for="newList" wx:key="key"
来循环数据,默认是item
<view>
<view class="box" wx:for="newList" wx:key="key" >
<view class="box_one" catchtap="tiaoxq" data-id="item.id" id="item.id">
<view class="box_one_img">
<image class="box_img" src="item.imgUrl"></image>
</view>
<view class="box_one_text">
<text class="box_txt_one">item.title</text>
<text class="box_txt_two">item.newTime</text>
</view>
</view>
</view>
</view>
数据渲染完成后,简单写一下样式,然后绑定一个点击事件,随便把id传过去,先打印一下这个id看看是否一致
tiaoxq(e)
// console.log(e.currentTarget.dataset.id);
var id =e.currentTarget.dataset.id
// console.log(id);
wx.navigateTo(
url: `/pages/getgetDetail/index?id=$id`,
)
,
打印一下e(这里的e指的是ement)发现id在currentTarget.dataset
中,然后声明一个变量存一下,通过路由传参传到详情页
在详情页接收这个id
然后传到详情的接口中拿详情的数据,渲染到页面就完成了
onLoad(options)
var id = options.id
// console.log(id);
wx.request(
url: `http://localhost:8989/getDetail?id=$id`,
method:"GET",
success:res=>
this.setData(
xqList:res.data,
)
// console.log(res.data);
)
,
在这两个功能完成后,还剩下一个上拉触底更新数据,想要实现这个功能要先在app.json文件中加一个"onReachBottomDistance":10
上拉10px是触发这个onReachBottom()
函数,在这个函数中再次调用获取数据时的代码,然后传一个页码,用来获取新的数据,把新的数据放到旧的数组里,就实现了
onReachBottom()
this.data.p++
wx.request(
url: `http://localhost:8989/getData?p=$this.data.p`,
method:"GET",
success:res=>
this.setData(
newList:[...this.data.newList,...res.data],
)
// console.log(...res.data);
// console.log(this.data.newList);
)
,
这样就实现了一个简单的列表页
ps:小程序新手,勿喷
「小程序JAVA实战」小程序视频列表到详情功能(58)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinliebiaodaoxiangqinggongneng57/
目前直接展示的都是详情页面,现在需要完成通过详情可以直接跳转到首页,通过首页点击某个视频,可以跳转到某个视频详情中。源码https://github.com/limingios/wxProgram.git 中No.15
修改首页功能
通过block 索引的方式找到点击的对应视频列表中的其中一个传递给详情页面
const app = getApp()
Page({
data: {
// 用于分页的属性
totalPage: 1,
page: 1,
videoList: [],
screenWidth: 350,
serverUrl: "",
searchValue:""
},
onLoad: function (params) {
var me = this;
var screenWidth = wx.getSystemInfoSync().screenWidth;
me.setData({
screenWidth: screenWidth,
});
var searchValue = params.searchValue;
var isSaveRecord = params.isSaveRecord;
if (isSaveRecord == null || isSaveRecord == "" || isSaveRecord == undefined){
isSaveRecord = 0;
}
me.setData({
searchValue: searchValue,
});
// 获取当前的分页数
var page = me.data.page;
me.getAllVideosList(page, isSaveRecord);
},
getAllVideosList: function (page, isSaveRecord){
var me = this;
var serverUrl = app.serverUrl;
wx.showLoading({
title: ‘请等待,加载中...‘,
});
wx.request({
url: serverUrl + ‘/video/showAll?page=‘ + page + "&isSaveRecord =" + isSaveRecord,
method: "POST",
data:{
videoDesc: me.data.searchValue
},
success: function (res) {
wx.hideLoading();
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
console.log(res.data);
// 判断当前页page是否是第一页,如果是第一页,那么设置videoList为空
if (page === 1) {
me.setData({
videoList: []
});
}
var videoList = res.data.data.rows;
var newVideoList = me.data.videoList;
me.setData({
videoList: newVideoList.concat(videoList),
page: page,
totalPage: res.data.data.total,
serverUrl: serverUrl
});
}
})
},
onPullDownRefresh: function (params) {
var me = this;
wx.showNavigationBarLoading();
me.getAllVideosList(1,0);
},
onReachBottom: function (params){
var me = this;
var currentPage = me.data.page;
var totalPage = me.data.totalPage;
//判断当前页数和总页数是否相等,如果相同已经无需请求
if (currentPage == totalPage){
wx.showToast({
title: ‘已经没有视频啦~‘,
icon:"none"
})
return;
}
var page = currentPage+1;
me.getAllVideosList(page,0);
},
showVideoInfo:function(e){
var me = this;
var videoList = me.data.videoList;
var arrIndex = e.target.dataset.arrindex;
var videoInfo = JSON.stringify(videoList[arrIndex]);
wx.redirectTo({
url: ‘../videoInfo/videoInfo?videoInfo=‘ + videoInfo,
})
}
})
详情页面获取传递过来的内容复制src
var videoUtils = require(‘../../utils/videoUtils.js‘)
const app = getApp()
Page({
data: {
cover:‘cover‘,
videoContext:"",
videoInfo:{},
videId:‘‘,
src:‘‘
},
showSearch:function(){
wx.navigateTo({
url: ‘../videoSearch/videoSearch‘,
})
},
onLoad:function(params){
var me = this;
me.videoContext = wx.createVideoContext(‘myVideo‘, me);
var videoInfo = JSON.parse(params.videoInfo);
me.setData({
videId: videoInfo.id,
src: app.serverUrl + videoInfo.videoPath,
videoInfo: videoInfo
})
},
showIndex:function(){
wx.redirectTo({
url: ‘../index/index‘,
})
},
onShow:function(){
var me = this;
me.videoContext.play();
},
onHide:function(){
var me = this;
me.videoContext.pause();
},
upload:function(){
videoUtils.uploadVideo();
}
})
PS: 页面的跳转传值在html和jsp开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。
以上是关于用小程序完成简单的详情列表功能的主要内容,如果未能解决你的问题,请参考以下文章