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

我們分為以下部分來解決這個問題：

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

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

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

 

---

 

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

我設置了頁面有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
    })
  }
})

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