就(jiù)像 iOS 的(de)列表一樣，上(shàng)滑的(de)時(shí)候每個(gè) section 的(de) header 固定，直到(dào)滾動到(dào)下一個(gè) section 的(de)時(shí)候下一個(gè) header 把上(shàng)一個(gè) header「頂走」。

類似 https://codepen.io/chrissp26/...點擊預覽

鑒于(yú)小程序沒有 DOM 相關 API，不(bù)知道(dào)如何實現這(zhè)種效果。

Update: 我看到(dào)京東小程序的(de)首頁有類似效果，所以(yǐ)理論上(shàng)是(shì)可以(yǐ)做到(dào)的(de)？另，非回答類的(de)回複請直接在(zài)問題下評論，不(bù)要(yào / yāo)開回答。

A：1.4.0 小程序開始有 WXML節點信息的(de)API

可以(yǐ)通過這(zhè)個(gè)來(lái)進行操作。

裏面有一個(gè)boundingClientRect 不(bù)正是(shì)可以(yǐ)利用的(de)API？

https://mp.weixin.qq.com/debu...

css3新增的(de)一個(gè)position屬性可以(yǐ)直接實現sticky的(de)效果
在(zài)你的(de)header中加上(shàng)

{
  position: sticky;
  top: 0;
}

就(jiù)可以(yǐ)了(le／liǎo)

2、微信小程序中的(de)在(zài)退出(chū)後再進入時(shí)，canvas中的(de)定時(shí)動畫效果異常

我在(zài)入口頁做了(le／liǎo)一個(gè)圓從裏向外擴大(dà)循環往複的(de)canvas動畫效果，在(zài)開發工具測試是(shì)沒有問題的(de)，然後在(zài)真機測試時(shí)發現第一次進入也(yě)是(shì)沒有問題的(de)，但是(shì)若是(shì)在(zài)使用中退出(chū)小程序再進入就(jiù)會出(chū)現動畫的(de)效果變得非常的(de)快，下面是(shì)簡單的(de)代碼（需要(yào / yāo)圖片資源的(de)部分可以(yǐ)注釋掉），可以(yǐ)在(zài)真機測試下

<view class="home">
  <view class='home-header clearfix'>
    <view class='home-person' bindtap="ToUserCenter">
      <view class='home-personwrap'>
        <image src='../../static/person.png'></image>      
      </view>
    </view>
  </view>
    <canvas canvas-id='button' id='button' bindtap='ToIndex'>
    </canvas> 
</view>

Page({

  /**
   * 頁面的(de)初始數據
   */
  data: {
    range:40,
    PictempFilePath:'',
  },
  StartLogin(){
    qcloud.login({
      success(result) {
        console.log('登錄成功', result);
      },

      fail(error) {
        console.log('登錄失敗', error);
      }
    });
  },
  ToUserCenter(){
    wx.navigateTo({
      url: '../usercenter/usercenter',
    })
  },
  ToIndex(){
    wx.navigateTo({
      url: '../index/index',
    })
  },
  
  drawImage(){
    let ctx = wx.createCanvasContext('button')
    ctx.translate(75,75)
    
    ctx.arc(0, 0, this.data.range, 0, 2 * Math.PI)
    ctx.drawImage('../../static/btn.png', -60, -60, 120, 120)
    ctx.setLineWidth(5)
    ctx.setStrokeStyle('#ff7058')
    ctx.setGlobalAlpha(0.8)
    ctx.stroke()
    ctx.draw()
  },
  RepetDraw(){
    clearInterval(t)
    var t = setInterval(() => {
      if (this.data.range < 65) {
        var range = this.data.range + 1
        this.setData({
          range: range
        })
      } else {
        this.setData({
          range: 50
        })
      }

      this.drawImage()
    }, 130)
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // this.Downloader()
   
    // this.StartLogin()
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.RepetDraw()
  }

})

A：退出(chū)的(de)時(shí)候清除循環:clearInterval(timer).

3、微信小程序input标簽中文字被遮蓋的(de)問題

wxml代碼

<input type='text' placeholder='請輸入驗證碼' class='test'></input>

wxss代碼

.test{
  margin-top:100rpx;
  width:50%;
}
input {
  display:block;
  height:1.4rem;
  text-overflow:clip;
  overflow:hidden;
  white-space:nowrap;
  font-family:UICTFontTextStyleBody;
  min-height:1.4rem;
}

疑惑：明明還有空間的(de)，爲(wéi / wèi)什麽文字會顯示不(bù)全

A:不(bù)知道(dào)是(shì)不(bù)是(shì)bug，微信小程序裏input寬度縮小，input可輸入文字的(de)區域會縮小的(de)更多，比如說(shuō)你把input寬度設置爲(wéi / wèi)90%，則input文字輸入可顯示的(de)區域可能隻有80%左右。目前的(de)解決方法：在(zài)input輸入框外面套一層view，通過改變view的(de)寬度控制input的(de)長度，這(zhè)樣不(bù)會影響文字顯示.

4、小程序運用編譯錯誤

github想下載的(de)demo 運行報錯，大(dà)神求助

A:問題解決了(le／liǎo)，在(zài)控制台輸入openVendor() ，清除裏面的(de)wcsc wcsc.exe 然後重啓工具。