「小程式JAVA實戰」小程式影片列表到詳情功能(58)
目前直接展示的都是詳情頁面,現在需要完成透過詳情可以直接跳轉到首頁,透過首頁點選某個影片,可以跳轉到某個影片詳情中。原始碼 中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開發中也比較普遍,千萬不要有老鐵透過快取的方式傳值,可以是可以但是不清晰了。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3209/viewspace-2823826/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 「小程式JAVA實戰」小程式的影片點贊功能開發(62)Java
- 「小程式JAVA實戰」小程式模組頁面引用(18)Java
- 「小程式JAVA實戰」小程式的表單元件(25)Java元件
- 「小程式JAVA實戰」小程式的上傳(終結)(72)Java
- 微信小程式教學第四章第三節(含視訊):小程式中級實戰教程:詳情-功能完善微信小程式
- 小程式實戰—答題類小程式
- 微信小程式入門到實戰(三)微信小程式
- 微信小程式入門到實戰(二)微信小程式
- 微信小程式入門到實戰(一)微信小程式
- 盲盒商城小程式開發功能列表
- 10行程式碼實現微信小程式支付功能,使用小程式雲開發實現小程式支付功能(行程微信小程式
- 小程式從入門到實戰系列(一)
- 「小程式JAVA實戰」 小程式抽離公用方法進行模組化(12)Java
- 企業級微信小程式實戰詳解微信小程式
- 小程式–儲存圖片到相簿功能實現
- 「小程式JAVA實戰」 小程式wxss樣式檔案的使用(七)Java
- 微信小程式-列表渲染微信小程式
- 上線短影片去水印功能到小程式
- 實現小程式canvas拖拽功能Canvas
- 微信小程式 遮罩功能實現微信小程式遮罩
- 微信小程式+騰訊雲直播的實時音影片實戰筆記微信小程式筆記
- 小程式入門到實戰(二)--案例原始碼分享原始碼
- 微信小程式實戰影片教程附原始碼課件與多個微信小程式原始碼 14課微信小程式原始碼
- 微信小程式教學第四章第二節(含視訊):小程式中級實戰教程:詳情-檢視渲染微信小程式
- 微信小程式支付接入實戰微信小程式
- Day7-微信小程式實戰-交友小程式首頁UI微信小程式UI
- 微信小程式教學第四章第一節(含視訊):小程式中級實戰教程:詳情-頁面製作微信小程式
- 小程式實現實時聊天IM功能
- 微信小程式實現換膚功能微信小程式
- 【小程式】使用UDP實現群聊功能UDP
- 小程式 — 實現左滑刪除效果(列表)③
- 小程式抓包實戰:Fiddler配置與使用詳細
- 小程式電商系統後臺功能詳解
- 入門微信小程式(含實戰) [第八篇]實現完整的相簿列表邏輯(小程式端&伺服器端)微信小程式伺服器
- Taro + 小程式雲開發實戰
- 小程式複製功能
- 紅包店小程式功能
- 微信小程式-檢視列表渲染微信小程式