为了账号安全,请及时绑定邮箱和手机立即绑定

「小程序JAVA实战」小程序视频列表到详情功能(58)

目前直接展示的都是详情页面,现在需要完成通过详情可以直接跳转到首页,通过首页点击某个视频,可以跳转到某个视频详情中。源码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,
    })

  }


})

https://img1.sycdn.imooc.com//5d9812ec000168dc12400583.jpg

详情页面获取传递过来的内容复制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();
  }
})

https://img1.sycdn.imooc.com//5d9812ec000174e312400580.jpg

PS: 页面的跳转传值在html和jsp开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
1.7万
获赞与收藏
1318

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消