一 前言

筆者最近一直在開發(fā)京東app嵌入的h5項目和微信小程序商城項目，在此期間遇到很多坑。這篇文章主要是針對 h5| Hybrid | 微信小程序 三個方向來講述我遇到的坑，以及詳細(xì)講解我是如何解決問題的。

一直以來，移動端適配就是一個令人頭疼的問題。如果想要吃透移動端，還需要不少的實踐經(jīng)驗，有的時候在pc端調(diào)試沒有問題，但是在m端就會出現(xiàn)問題。以下這16個問題是我在實際工作中遇到的，親自奉上給大家。希望大家收藏一波，以備不時之需。

喜歡筆者的可以「點贊 + 關(guān)注 」 一波，持續(xù)更新前端硬核文章。

M端h5踩坑總結(jié)

以下是京東嵌入h5，h5落地頁，遇到的問題。我用一個思維導(dǎo)圖表示出來。

1 ios：:postion:fixed 定位抖動跳屏問題

背景

在開發(fā)京東app,Hybrid h5業(yè)務(wù)頁面的時候，遇到一個非常棘手的問題，因為這個頁面類似京東app商品詳情頁面的動畫效果。動畫效果如下所示。安卓手機正常，但是ios手機出現(xiàn)，滑塊抖動問題，圖片會出現(xiàn)閃動的效果。這個問題困擾了很久，網(wǎng)上搜索了大量的解決方案，都沒有實際解決問題，自己也嘗試了幾種方法，也沒有成功，當(dāng)時很奔潰??????，最后還是靈光一現(xiàn)，想到了一個巧妙的解決方案??。

整個流程就是，當(dāng)視圖容器向上滑動的時候，商品卡片容器需要緩慢移動，首先需要將商品卡片需要脫離標(biāo)準(zhǔn)流，設(shè)置定位position:fixed 固定定位。然后控制top值來控制滑塊的緩慢移動。但是在容器向上滑動的過程中，滑塊會出現(xiàn)抖動，閃動的效果。

??分析這個原因，應(yīng)該是ios對position表現(xiàn)不友好的原因，這種類似的原因在小程序里也很常見。

解決方案

網(wǎng)上搜索和自己探索的失敗解決方案

① 給頂級元素設(shè)置height:100% ( 并沒有奏效 ) 。

② 增加 transform: translate(0) 屬性 （ 并沒有奏效 ）

③ 改變布局由fixed 定位,改成absolute定位，滾動條基于自身。（ 能夠從根本上解決偶爾跳屏的問題，但是隨之而來的就是ios 滾動條問題，基于document才能有效觸發(fā)，遂放棄此方案）

④ 不改變布局的情況下，由fixed 定位,改成absolute定位，滾動條基于document,定位值完全取決于數(shù)據(jù)驅(qū)動。（能夠從根本上解決偶爾跳屏的問題，但是隨之而來的就是要不斷改變自身的top值 ，導(dǎo)致更新會慢的情況 ，用戶體驗不好，流暢度欠佳，遂放棄此方案 ）

⑤ -webkit-overflow-scroll:touch解決滑動無慣性（ 并沒有奏效 ）

⑥ background-attachment:fixed（ 并沒有奏效 ）

解決方案

試了好久，終于想到了一個解決方法。繼續(xù)使用 fixed 定位，因為我們這里需要通過定位，抖動不是單純fixed定位的原因。和頻繁改變top值也有很大關(guān)系。放棄改變top值 ，運用transform: translateY來使視圖上下移動。

<view class="scroll_box" style={{ transform:`translateY(${ top }px)` }}    >   <!-- 很多東西 --></view>.scroll_box{    position:fixed;}

2 android問題：border-radius：50% 圓角被拉伸問題

背景

當(dāng)我們期望用 border-radius：50%； 來繪制圓點的時候。如果圓比較大可能不是很明顯，但是如果圓比較小的時候，會出現(xiàn)明顯的不圓，圓被拉伸的情況。

大致效果如下所示。

??分析原因， 在移動端通常會適配不同的手機，所以使用rem布局，，rem 在換算為px時，會是一個帶小數(shù)點的值，安卓對小于1px的做了處理（不同瀏覽器對小于1px的處理方式不同，有的采用四舍五入，有的大于某個值展示1px否則就舍去），從而導(dǎo)致圓角不圓；在ios下就沒有這個問題。

解決方案

我們先把已知視圖寬高變成2倍 ,然后用 transform: scale(.5) 讓視圖縮小50% ,就可以在 android得到很圓的效果。親測這個方法非常奏效，形成的圓非常的圓。

我們舉個例子??：

<div class="round" ></div>

沒有做兼容之前的樣式，

.round{
    border-radius:50%;
    width:10px;
    heigth:10px;
}

改成

.round{
    border-radius:50%;
    width:20px;
    heigth:20px;
    transform: scale(.5);
}

這里用的taro-h5, px 會被自動轉(zhuǎn)化成rem。

問題演變

有的時候我們在給元素設(shè)置高度非常小的時候也會出現(xiàn)這個問題。

<view class='box'  /> 

.box{
    width:100px;
    height:1px;
}

因為我們高度設(shè)置為height:1px,當(dāng)taro給轉(zhuǎn)換成rem的時候，也會出現(xiàn)四舍五入的情況，結(jié)果將1px弄沒了，變成了0px，于是乎就造成了1px元素?zé)o法顯示的bug，解決方案和上述的原理一樣。將高度變成原來的2倍，再通過transform: scaleY(.5); y方向變?yōu)樵瓉淼亩种弧?/p>

.box{
    width:100px;
    height:2px;
    transform: scaleY(.5);
}

3 iOS問題 ：最后子元素ios底部設(shè)置margin-bottom無效

背景

這個問題在ios環(huán)境下，還是很容易發(fā)生的。當(dāng)視圖容器的最后一個元素設(shè)置 margin-bottom ,期望距離整個容器視圖有一個距離的時候，發(fā)現(xiàn)在安卓手機正常，但是在ios下，會出現(xiàn)margin-bottom無效的情況。

解決方案

這個的解決方案也非常非常的簡單，將margin-bottom改成padding-bottom就能根本的解決問題。

例子??：

<div class="box" ></div>

.box{
   margin-bottom: 148px;
}

改成

.box{
   padding-bottom: 148px;
}

4 ios 屏幕上拉下滑出現(xiàn)空白

背景

手指按住屏幕下拉，屏幕頂部會多出一塊空白區(qū)域。手指按住屏幕上拉，底部多出一塊空白區(qū)域。空白區(qū)域的顏色，在不同app平臺打開，顏色會有差別，嵌入京東app h5中的空白背景色為白色，但是在微信中為灰色。

??分析原因: 在 iOS 中，手指按住屏幕上下拖動，會觸發(fā) touchmove 事件。這個事件觸發(fā)的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。

效果如下：

解決方案

1 障眼法,很管用

比如對于京東app這種白色背景,如果我們background也是白色的，完全可以用整個頂端容器，定位填充整個容器來解決這個問題。這樣視圖不會跟隨上拉下滑而移動。如果空白顏色和背景顏色一致，視覺上就會抵消滑動效果。根本上解決出現(xiàn)空白的問題。

一言不合上代碼??。

<div id="root" >
   <!-- 此處省略很多內(nèi)容  -->
</div>

#root{
    position: fixed;
    left:0;
    top:0;
    bottom: 0;
    right: 0;
}

2 監(jiān)聽事件，禁止上滑下滑

這種方法比較靠譜，俗話說解鈴還須系鈴人,這個問題根本原因是 touchmove 引起的，那么從根本上解決問題，還是要從touchmove這個事件入手。我們需要監(jiān)聽移動端document 的 touchmove然后通過 preventDefault 方法，阻止同一觸點上所有默認(rèn)行為，比如滾動事件。這里要注意的是什么時候，不讓滑動，什么時候讓滑動。

<div  ref="root"  ></div>const box = this.$refs.rootbox.addEventListener('touchmove',function(e){    /* 讓視圖容器正常滾動 */    e._isScroller = true}) /* 禁止上滑，下滑 */document.body.addEventListener('touchmove', function (e) {    if (e._isScroller) return    /*  阻止默認(rèn)事件 */    e.preventDefault()}, {    passive: false})

5 移動端問題：input 的 placeholder 垂直方向不居中問題

背景

在開發(fā)移動端的時候，會遇到 input 的 placeholder 垂直方向不居中的情況。

解決方案

input的placeholder會出現(xiàn)文本位置偏上的情況:PC端設(shè)置line-height等于height能夠?qū)R,而移動端仍然是偏上,解決方案時是設(shè)置css line-height:normal;

html:

<input class="input"  />

樣式：

.input{
   line-height:normal;
}

6 IOS 滑動問題 -webkit-overflow-scrolling : touch 卡住不動問題

背景

在ios頁面向上向下滑動的過程中，會出現(xiàn)卡頓，不流暢的現(xiàn)象,具體問題如下:

1 在safari上，使用了-webkit-overflow-scrolling:touch之后，頁面偶爾會卡住不動。(中招) 2 在safari上，點擊其他區(qū)域，再在滾動區(qū)域滑動，滾動條無法滾動的(中招)。

在解決這個問題之前，我們先理解-webkit-overflow-scrolling的兩個屬性

1 auto: 使用普通滾動, 當(dāng)手指從觸摸屏上移開，滾動會立即停止。 2 touch: 使用具有回彈效果的滾動,當(dāng)手指從觸摸屏上移開，內(nèi)容會繼續(xù)保持一段時間的滾動效果。繼續(xù)滾動的速度和持續(xù)的時間和滾動手勢的強烈程度成正比。同時也會創(chuàng)建一個新的堆棧上下文。

解決方案

<div id="app" style="-webkit-overflow-scrolling: touch; ">    <div style="min-height:101%"></div> </div>

或

方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上， 將height加1%或1px。從而主動觸發(fā)scrollbar。

7 移動端適配：頁面放大縮小

背景

如果沒有使用taro等跨平臺框架構(gòu)建的h5,當(dāng)在M端展示h5的時候，雙擊或者雙指張開手指頁面元素，頁面會放大或縮小。

針對這個情況，實際不算一個bug，因為html本身就支持縮放。在pc端的時候，我們可以控制鼠標(biāo)滾輪控制頁面縮放，但是在移動端這個行為也存在。但是對于嵌入的 M端 h5頁面，我們不需要這個功能。

解決方案

我們可以通過 meta 元標(biāo)簽標(biāo)準(zhǔn)中有一個 viewport 屬性，用來控制頁面的縮放，一般用于移動端。

我們先看看taro-h5是怎么適配的.

  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">

核心user-scalable=no ,沒錯，就是通過這個屬性來阻止縮放行為的。

8 taro跨平臺開發(fā)H5: swiper組件橫向滾動平鋪問題

背景

在用taro-vue構(gòu)建 h5應(yīng)用的時候，對于banner輪播圖部分，出現(xiàn)一個詭異的問題，就是水平方向輪播的時候，期望圖片是正常的輪播效果，但是初始化的時候，圖片垂直方向平鋪。

大致效果如下圖所示：

期望結(jié)果

實際結(jié)果

解決方案

大致代碼如下：

<swiper  class="swiper-wrap"  >  <swiper-item        v-for="(v,idx) in renderList"        :key="idx"        class="swiper-item"    >        <view class="swiper-wrap-item">            <image            mode="widthFix"            :src="v.path"            class="swiper-image"            />        </view>    </swiper-item></swiper>

這個棘手的問題在于不是每次都復(fù)現(xiàn)，由于這個頁面是商品詳情頁，問題會根據(jù)某一個商品出現(xiàn)。因為 renderList 是通過后臺獲取的圖片列表，所以判斷問題是由渲染swiper -> 請求數(shù)據(jù)賦值renderList -> 再到swiper-item渲染圖片列表的過程中，某一個環(huán)節(jié)出了問題。遂改變了渲染方案， 所以采用 獲取數(shù)據(jù) -> 渲染swiper ->渲染swiperItem的方案。

改進(jìn)后的代碼如下：

<swiper  class="swiper-wrap"  v-if="renderList.length > 0"  >  <swiper-item        v-for="(v,idx) in renderList"        :key="idx"        class="swiper-item"    >        <view class="swiper-wrap-item">            <image            mode="widthFix"            :src="v.path"            class="swiper-image"            />        </view>    </swiper-item></swiper>

當(dāng) renderList獲取到數(shù)據(jù)之后，在依次渲染swiper，swiper-item。根本解決了這個問題。

微信小程序

以下在開發(fā)小程序的過程中遇到的兼容問題。

1 android問題：打開webview被微信攔截問題

背景

在微信小程序里開發(fā)webview h5的時候，在配置了合法域名，域名備案的情況下，出現(xiàn)了 ios 上正常打開，但是在 android 手機上出現(xiàn)了被攔截的情況。而且這些情況都是因為打開webview的 url中存在漢字的情況。

效果圖片

分析原因，解決方案

實際原因很簡單，安卓手機對于 http / https url如果存在漢字，需要用encodeURI對漢字進(jìn)行編碼處理就可以了。

 <web-view :src="webViewUrl" @message="handerMessage" /> this.webViewUrl  = commonUrl + '/pages/goods/index?name=' + encodeURI('外星人')

如果是接口請求，就這么寫

wx.request({   url: commonUrl + '/pages/goods/index?name=' + encodeURI('外星人'),   method: "GET",})

完美解決了問題。

webview 被微信攔截，詳細(xì)解決方案。

關(guān)于微信小程序中webview被攔截。我總結(jié)了一個詳細(xì)的方案，供大家參考，也是開發(fā)中踩坑實錄。

如果在微信小程序開發(fā)webview中 ， 被微信攔截，你需要這樣逐一排查。

① 首先檢查域名是否備案

首先檢查域名是否備案，如果域名沒有備案，是無法正常打開webview的，如果當(dāng)前域名是二級域名，那就看主域名有沒有備案，二級域名無需獨立備案。

② 配置業(yè)務(wù)域名

配置業(yè)務(wù)域名流程很簡單，首先登陸小程序后臺 -> 開發(fā)，開發(fā)管理 - > 開發(fā)設(shè)置。

然后選擇業(yè)務(wù)域名 -> 點擊修改 -> 添加業(yè)務(wù)域名。

注意上邊這部分，需要按這上面的操作添加。添加成功后，會自動添加到，合法域名列表中。

③ 如果 ① 和 ② 完成后，仍然被攔截

如果走完上邊的兩步，仍然被攔截。在2020年之前的域名，一般不會被攔截，但是微信對新申請的域名比較嚴(yán)格，需要先點擊申訴試試，如果申訴還不行的話，需要聯(lián)系微信團(tuán)隊相關(guān)人員解決問題，因為我們公司有與微信團(tuán)隊聯(lián)系的部門，所以無須我們聯(lián)系。

④ 如果只有安卓手機被攔截

如果只有安卓手機被攔截的情況，請按照上面的方法，編碼帶漢字的url。

2 iOS問題：微信小程序1rpx border ios真機顯示不全問題

背景

微信小程序在iphone低版本手機(iphone6 ,6p),如果多個視圖容器排列(水平和豎直方向都會存在)，可能會出現(xiàn)個別邊框顯示不全的問題。

效果如下圖所示：

<view class="father" >
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>

.father{
    width: 696rpx;
    height: 60rpx; 
    font-size: 28rpx;
    color: #01b5b5;
    margin: 0 auto;  
   }
   .item{
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #01b5b5;
    float: left;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
}

解決方案

經(jīng)過測試得來一組數(shù)據(jù) ,注意步驟1中加粗的文本.label-con類中width:696rpx,將標(biāo)簽的父容器寬度設(shè)置為下面的值都會出現(xiàn)這個692 693 696 697 700 701 704 705 708 709。我們把這組數(shù)字除以2。

692/2=346,693/2=346.5,696/2=348,697/2=348.5,700/2=350,701/2=350.5,704/2=352,705/2=352.5,708/2=354,709/2=354.5

**分析結(jié)果:**當(dāng)標(biāo)簽的父容器寬度(單位rpx)÷2的值為偶數(shù)或偶數(shù).5的時候會出現(xiàn)該bug,那么我們可以推到出用200.52=401,3022=604等等都會重現(xiàn)這個bug。那么解決方案油然而生。

第一種：設(shè)置高度/寬度到安全的值

第一種方式是設(shè)置標(biāo)簽父容器的寬度到無bug值，即(奇數(shù)或奇數(shù).5)2,例如2812rpx,281.5*2rpx可以解決;

第二種：放一個1rpx的元素占位。(親測有效)

<view class="father" >
    <view class="hold" />
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>

.hold{
    width: 1rpx;
    height: 100%;
    float: left;
}

效果如下，完美的解決了這個問題。

3 小程序問題: scroll-view 不滑動問題

背景

相信很多同學(xué)在開發(fā)微信小程序的時候都會遇到scroll-view不滑動的情況，造成scroll-view不滑動的原因有會多，橫向和豎向不滑動的原因也不同，接下來我會分別從橫向和豎向分別介紹造成滑動的原因。

橫向：

豎向：

解決方案

1 豎直方向

對于豎直方向的滑動，造成原因如下:

① scroll-view 的 scroll-y 是否為 true

<scroll-view :scroll-y="true" >
  <!-- 此處省略很多東西 -->
</scroll-view>

② scroll-view 必須設(shè)置具體的高度，如果沒有設(shè)置高度，或者直接繼承父元素高度100%,那么 scroll-view豎直方向?qū)o效。我們必須動態(tài)獲取scroll-height因為在不同型號手機，都要達(dá)到完美的效果

如何正確獲取scroll-view高度

情況一 scroll-view 在中間的情況：

const scrollHeight = windowHeight - scrollTop - scrollBottom

情況二 scroll-view 靠底部的情況 ：

const scrollHeight = windowHeight - scrollTop

③ 檢查 scroll-view 是否設(shè)置了 overflow-y: auto; 等滑動屬性。

<scroll-view :scroll-y="true" class="scroll_box"  >  <!-- 此處省略很多東西 --></scroll-view>.scroll_box{    height:500px;    overflow-y: auto;}

2 水平方向

對于水平方向的滑動，造成原因如下:

① scroll-view 的 scroll-x 是否為 true

<scroll-view :scroll-x="true" >
  <!-- 此處省略很多東西 -->
</scroll-view>

② 不要設(shè)置 display:flex; 等情況 ,讓子元素設(shè)置 display:inline-block

③ scroll-view 設(shè)置樣式 white-space: nowrap;

<scroll-view :scroll-x="true"  style="white-space: nowrap;" ></scroll-view>

4 低版本android手機：原生組件層級問題

背景

這個是很久之前做的一個類似地圖的項目，在地圖組件上，有一個view,在高版本手機上，正常顯示，但是在低版本安卓手機上，會出現(xiàn)view只有文字能看見，背景完全被原生組件覆蓋，設(shè)置層級也沒有效果。

解決方案

后來查了微信文檔，才明白原生組件和原生組件的限制。

小程序中的部分組件是由客戶端創(chuàng)建的原生組件，這些組件有：

camera canvas input（僅在focus時表現(xiàn)為原生組件） live-player live-pusher map textarea video

原生組件的使用限制

由于原生組件脫離在 WebView 渲染流程外，因此在使用時有以下限制：

①原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。后插入的原生組件可以覆蓋之前的原生組件。

②原生組件還無法在 picker-view 中使用。基礎(chǔ)庫 2.4.4 以下版本，原生組件不支持在 scroll-view、swiper、movable-view 中使用。

③部分CSS樣式無法應(yīng)用于原生組件，例如：無法對原生組件設(shè)置 CSS 動畫，無法定義原生組件為 position: fixed，不能在父級節(jié)點使用 overflow: hidden 來裁剪原生組件的顯示區(qū)域。

④原生組件的事件監(jiān)聽不能使用 bind:eventname 的寫法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式。原生組件會遮擋 vConsole 彈出的調(diào)試面板。在工具上，原生組件是用web組件模擬的，因此很多情況并不能很好的還原真機的表現(xiàn)，建議開發(fā)者在使用到原生組件時盡量在真機上進(jìn)行調(diào)試。*

替代方案

cover-view 與 cover-image 為了解決原生組件層級最高的限制。小程序?qū)ｉT提供了 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。這兩個組件也是原生組件，但是使用限制與其他原生組件有所不同。

5 ios問題: 微信scroll-view內(nèi)部定位元素抖動問題

背景

ios環(huán)境下，scroll-view標(biāo)簽里面如果有，position:absolute的元素。當(dāng)scroll-view滑動的過程中，定位的元素會出現(xiàn)抖動的情況。

??分析原因，還是 scroll-view 和 ios兼容性的原因造成的。

解決方案

針對這個抖動問題，解決方案也是很簡單，我們把定位的元素從scroll-view拿出來。就能根本解決這個問題。

<view class="box" >    <scroll-view class="scroll_box"  :scroll-y="true" >        <view class="current" >我是定位元素</view>    </scroll-view></view>.box{  }.scroll_box{    height:500px;    overflow-y: auto;    position:relative;}.current{   position:absolute;   left:0;   top:0;}

改成

<view class="box" >    <scroll-view class="scroll_box"  :scroll-y="true" >    </scroll-view>    <view class="current" >我是定位元素</view></view>.box{    position:relative;}.scroll_box{    height:500px;    overflow-y: auto;}.current{   position:absolute;   left:0;   top:0;}

6 微信小程序跳轉(zhuǎn)微信小程序，第二次跳轉(zhuǎn)無效

背景

在開發(fā)小程序的時候，有一個小程序跳轉(zhuǎn)另外一個小程序的場景，第一次的時候沒有任何問題，但是當(dāng)從跳轉(zhuǎn)的目標(biāo)小程序，返回到當(dāng)前小程序之后，第二次跳轉(zhuǎn)的時候，發(fā)現(xiàn)跳轉(zhuǎn)功能失效了，無法再次跳轉(zhuǎn)。我們的跳轉(zhuǎn)邏輯是寫在一個小程序過渡頁面的生命周期中的。具體流程圖如下所示：

解決方案

先看看跳轉(zhuǎn)小程序方法

wx.navigateToMiniProgram({
    appId:'appId',
    path:'路徑',
    extraData:'需要傳遞給小程序的數(shù)據(jù)',
    success(){}, // 成功回調(diào)
    fail(){}, //失敗回調(diào)
    complete(){} //無論成功/失敗，都會執(zhí)行完成方法。
})

??這到底是為什么呢，這個問題困擾我很久，查閱了相關(guān)資料，微信文檔都沒找到相關(guān)的解決方案。但是微信文檔有這么一句話，需要用戶觸發(fā)跳轉(zhuǎn)，從 2.3.0 版本開始，若用戶未點擊小程序頁面任意位置，則開發(fā)者將無法調(diào)用此接口自動跳轉(zhuǎn)至其他小程序 最后發(fā)現(xiàn)是第二次跳轉(zhuǎn)的過程中，由于不是用戶主動行為(點擊事件等人為主動的行為)，而是又過渡頁面的生命周期執(zhí)行的跳轉(zhuǎn)小程序，所以微信被判定無效的跳轉(zhuǎn)，就會直接走跳轉(zhuǎn)失敗的邏輯,webview里面的點擊跳轉(zhuǎn)事件不算是用戶的主動行為????。

所以我們在過渡頁進(jìn)行一判斷，如果是第二次跳轉(zhuǎn)，先彈出彈窗，讓用戶主動點擊，觸發(fā)用戶主動行為。然后再跳轉(zhuǎn)小程序。

7 taro小程序 scroll-view 下滑，突然置頂問題

背景

在用taro-vue搭建小程序的時候，在scroll-view向下滑動的時候，會出現(xiàn)一個詭異情況，就是scroll-view會因為一個兄弟元素的顯示隱藏，而突然置頂。

結(jié)構(gòu)是這樣的。

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->    </scroll-view>    <view  class="current" v-show="currentShow" > </view></view>

當(dāng)scroll-view滑動的時候，想用變量currentShow控制scroll-view顯示隱藏，但是 currentShow一旦改變，就會引起 scroll-view 突然置頂。

解決方案

scroll-view的問題還真是多呀，這個問題曾困擾筆者很久, taro3.0 taro-vue畢竟不夠成熟，會有很多想象不到的問題，如果想用taro,我這里推薦taro2.0比較成熟。

廢話不多說，這里介紹兩個解決方案。

1 將當(dāng)前元素節(jié)點放在 scroll-view元素內(nèi)部。

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->        <view  class="current" v-show="currentShow" > </view>    </scroll-view> </view>

2 將v-if 改變成 v-show

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->    </scroll-view>    <view  class="current" v-if="currentShow" > </view></view>

總結(jié)

這些問題都是筆者在實際工作中遇到的問題，吐血總結(jié)踩坑實錄，為了讓大家少走彎路。送人玫瑰，手留余香，閱讀的朋友可以給筆者點贊，關(guān)注一波 ，陸續(xù)更新前端超硬核文章。

參考資料

微信小程序1rpx border ios真機顯示不全問題分析及解決方案

微信官方文檔

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：

1. 點個「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點在看，都是耍流氓 -_-）

2. 歡迎加我微信「y3517320520」一起交流學(xué)習(xí)...

3. 關(guān)注公眾號「前端公蝦米」，持續(xù)為你推送精選好文。