微信小程序 按鈕固定在頁面底部遮住頁面顯示內容問題

咱們分爲如下部分來解決這個問題：

第一部分：問題的表現是怎麼樣的？

第二部分：問題的是如何實現的？

第三部分：如何解決問題？

 

---

 

第一部分：問題的表現是怎麼樣的？

我設置了頁面有0-99共100個數，可是最後幾個數字被底部固定的按鈕遮擋住了，顯示不全

 

第二部分：問題的是如何實現的？

第一步：首先實現按鈕固定在頁面底部，須要設置按鈕的position爲fixed

（注意：文章底部回帖出所有代碼，如下只是針對性的貼出此時正在說明的代碼）

index.wxml頁面：

<view class='btn-view'>
    <button class='btn'>底部按鈕</button>
</view>

index.wxss頁面：

.btn-view {
  width: 100%;
  padding: 20rpx 0;
  background-color: yellow;
  position: fixed;
  bottom: 0;
  left: 0;
}

.btn {
  width: 90%;
}

實現效果以下圖： 

 

 

第二步：給頁面填充數據

index.js頁面：

var list = []
for (var i = 0; i < 100; i++) {
    list.push(i)
}

this.setData({
    list:list
})

index.wxml頁面：

<view class='list'>
    <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
</view>

 

實現效果以下圖： 

 

結束以後，咱們就會發現，結果會如第一部分展現的那樣，按鈕遮擋住了頁面不部份內容😅...

 

第三部分：如何解決問題？

出現這個問題，我先嚐試給class=list的view添加了margin-bottom屬性，以下

.list {
  margin-bottom: 150rpx;
}

在開發工具上運行，完美解決！But...正如全部的美好都要經歷不止一次的磨難後方才實現同樣，當使用真機（iOS）運行時，問題依舊存在😅...

這個問題微信官網的論壇上也有人提，可是微信官方沒有給出回答（我看到的那個問題沒有回到）

問題還在，怎麼辦呢？

全部的問題都難不倒聰明的開發者😁下面來說講解決辦法：

---

 

方法一：在class爲list的view下面寫一個透明view，設置這個view的寬和高，以下：

（此方法爲投機取巧的作法，可是很好用（偷笑...），誰讓微信小程序官方不給個正解呢！）

index.wxml:

<view class='list'>
    <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
</view>
<view class='placeholder-view'></view>
<view class='btn-view'>
    <button class='btn'>底部按鈕</button>
</view>

index.wxss:

.placeholder-view {
  width: 100%;
  height: 150rpx;
}

顯示效果以下：全部內容都展現出來了

 

方法二：解決小程序position: fixed;定位在底部,遮擋頁面內容問題

看到這篇文章有解決，可是這個解決方法是：當頁面內容不足一屏時，按鈕在底部顯示，當內容多餘一屏時，按鈕會在內容下面隨內容一塊兒滾動

雖然說和咱們以前的初衷讓按鈕始終固定在底部有衝突，可是不失爲一種解決辦法，只要領導那邊能經過這種方法（不經過就用方法一，簡單、粗暴、有用）

---

 

完整代碼：

.wxml:

<view class="container">
  <view class='list'>
    <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
  </view>
  <view class='placeholder-view'></view>
  <view class='btn-view'>
    <button class='btn'>底部按鈕</button>
  </view>
</view>

.wxss:

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

.placeholder-view {
  width: 100%;
  height: 150rpx;
}

.btn-view {
  width: 100%;
  padding: 20rpx 0;
  background-color: yellow;
  position: fixed;
  bottom: 0;
  left: 0;
}

.btn {
  width: 90%;
}

.js:

Page({
  data: {
    list:[]
  },

  onLoad: function () {
    var list = []
    for (var i = 0; i < 100; i++) {
      list.push(i)
    }

    this.setData({
      list:list
    })
  }
})

方法二的代碼稍後整理出來再貼出來（待續...）