uni-app開發小程序實現錨點、圖片預覽、視頻播放進度保存

1、錨點實現

uni-app開發小程序錨點實現有兩種方式：一種是uni-app的api，另一種是微信小程序api

（1）、是uni-app的api

uni.createSelectorQuery().select('.item').boundingClientRect(data=>{//目標位置節點 類或者 id uni.createSelectorQuery().select(".viewbox").boundingClientRect((res)=>{//最外層盒子節點類或者 id　　　　uni.pageScrollTo({　　　　　　duration:0,//過渡時間　　　　　　scrollTop:data.top - res.top ,//到達距離頂部的top值　　　　})　　}).exec()}).exec();

（2）、小程序api

wx.pageScrollTo({selector: '#a2'});

2、圖片輪播+圖片預覽切換

swiper自適應高度、圖片居中

（1）、微信小程序 view中的image水平垂直居中

當 display: flex 配合 justify-content: center 使用時可以讓view水平居中

而配合 align-items: center 用時可以實現垂直居中效果

（2）、swiper輪播 + 圖片預覽 + 預覽滑動

輪播使用的是uni-app的組件swiper；

圖片預覽 + 預覽滑動 使用的uni-app的api：

uni.previewImage({current: ind,urls: arr,indicator: 'default'});

3、視頻輪播+切換暫停+視頻播放進度保存

（1）、輪播使用的是uni-app的組件swiper；

（2）、切斷暫停監聽swiper的change事件；

changeTab(e) { const curr = e.detail.current; // 暫停播放curr 的上一個及一個視頻 if ((curr - 1) >= 0) { const temp = 'myVideo' + (curr - 1); uni.createVideoContext(temp).pause(); } if ((curr + 1) <= this.videoUrls.length - 1) { const temp = 'myVideo' + (curr + 1); uni.createVideoContext(temp).pause(); }}

（3）、播放進度保存：視頻pause之後會自動停留在當前播放位置，不用處理；

4、nrm ls nrm use npm

nrm 是一個 npm 源管理器，允許你快速地在 npm源間切換。

npm默認情況下是使用npm官方源（使用npm config ls命令可以查看），在國內用這個源肯定是不靠譜的，一般我們都會用淘寶npm源：https://registry.npm.taobao.org/，修改源的方式也很簡單，在終端輸入：

npm setregistry https://registry.npm.taobao.org/

（1）、使用

nrm 安裝 ：npm install -g nrm

查看可用源：nrm ls

查看當前源：nrm current

切換源：nrm use taobao

添加源：nrm add 源地址為：http://，源名為name（隨意取）。

刪除源：nrm del

測試源速度：nrm test