「小程序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开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。
「小程序JAVA实战」小程序视频列表到详情功能(58)的更多相关文章
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
- 「小程序JAVA实战」小程序的页面重定向(60)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeyemianzhongdingxiang59/ 在我们正常的浏览网 ...
- 「小程序JAVA实战」小程序视频展示页开发(52)
转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/ 这次说下,小程序的视频 ...
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序查看视频发布者信息(64)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxuchakanshipinfabuzhexinxi63/ 当我们点击右下 ...
- 「小程序JAVA实战」小程序搜索功能(55)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxusousuogongneng54/ 通过用户搜索热销词,将热销词添加到 ...
随机推荐
- java裁剪图片
java裁剪图片保存到指定位置 /** * 图片裁剪通用接口 * * @param src 源图片地址,图片格式PNG * @param dest 目的图片地址 * @param x 图片起始点x坐标 ...
- 使用POI动态更新导出的EXCEL模板中的列
基本思路: 1.从附件服务器上取得模板的流文件 2.拿到流文件之后再使用workbook.write(outs);方法改变流文件中的数据. else if (pageContext.getParame ...
- 无线基站侧的信令风暴根因——频繁的释放和连接RRC产生大量信令、设备移动导致小区重选信令增加、寻呼信令多
全局思维(核心网和无线基站侧都会有信令风暴): LTE网络系统可能出现信令风暴的原因,大致可以总结出以下几点: 1.网络架构的变化,导致4G核心网信令流量较2G/3G大幅增加 a)架构扁平化:LTE网 ...
- Java语言发展史和eclipse配置
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 学习笔记20151211——AXI4 STREAM DATA FIFO
AXI4 STREAM DATA FIFO是输入输出接口均为AXIS接口的数据缓存器,和其他fifo一样是先进先出形式.可以在跨时钟域的应用中用于数据缓冲,避免亚稳态出现.支持数据的分割和数据拼接.在 ...
- SharePoint 2013的100个新功能之搜索(一)
一:新的搜索架构 SharePoint 2013中将最好的两个搜索引擎"SharePoint搜索"和"SharePoint FAST搜索服务"整合到了一个搜索引 ...
- react native 获取 软键盘高度 和 新增软键盘的组件
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...
- (转)Fiddler教程(Web调试工具)
转载地址:写得很不错的fildder教程 http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站: www.fiddler2.c ...
- (转) 一致性Hash算法在Memcached中的应用
前言 大家应该都知道Memcached要想实现分布式只能在客户端来完成,目前比较流行的是通过一致性hash算法来实现.常规的方法是将 server的hash值与server的总台数进行求余,即hash ...
- SQL优化(3):使用explain了解SQL性能-part2
接上文,上文对type列用实例做了说明,本文对Extra列进行一些说明. Extra列 Using filesort 前文说,需要对所有的查询结果进行一次排序,例如当使用order by时.但是若查询 ...