mpvue“踩坑”指南

mylxsw 發(fā)布于2019-08-23 11:50 / 1180人閱讀

摘要：首先我們使用的原因一般就是做一個(gè)下拉加載更多么，在小程序中頁(yè)面全局有一個(gè)滾動(dòng)到底部的事件我們只需要在這個(gè)事件里面寫(xiě)上拉加載更多就好了，和下拉刷新也不沖突。下拉刷新上拉加載更多嵌套子模板的問(wèn)題在新版本的中支持了這個(gè)功能，但是我勸大家不要用。

mpvue是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，框架整體和vue語(yǔ)法保持一致，整體開(kāi)發(fā)體驗(yàn)良好。但是越往深處走，越會(huì)發(fā)現(xiàn)一些問(wèn)題。 1. 同一個(gè)頁(yè)面被多次打開(kāi)所引發(fā)的問(wèn)題

首先是有這么一個(gè)需求，從 主頁(yè) -> 我的關(guān)注 -> 別人的主頁(yè)， 主頁(yè) 這個(gè)模塊被打開(kāi)了兩次

我拍拍胸脯對(duì)產(chǎn)品說(shuō)：沒(méi)問(wèn)題！

這個(gè)需求是沒(méi)毛病的，就是當(dāng)我們從 別人的主頁(yè) -> 我的關(guān)注 -> 主頁(yè) 的時(shí)候，我的信息變成了我剛剛打開(kāi)的那個(gè)人的信息，這TM...

不要慌，有些事情需要我們 “摸索”

在 mpvue 路由 Page A -> Page A -> Back 的時(shí)候，其實(shí)數(shù)據(jù)公用了一個(gè)對(duì)象，不知道為什么mpvue會(huì)這么設(shè)計(jì)，在官方解決這個(gè)問(wèn)題之前這里引用了 @maimake的解決辦法

首先創(chuàng)建一個(gè)hack文件 /src/util/Hack.js

const pageDatas = {}

export default {
  install(_Vue) {
    // 添加全局方法或?qū)傩?    _Vue.prototype.$isPage = function isPage() {
      return this.$mp && this.$mp.mpType === "page"
    }
    
    _Vue.prototype.$pageId = function pageId() {
      let pid = null
      try {
        pid = this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
      } catch (e) { }
      return pid
    }
    
    // 注入組件
    _Vue.mixin({
      
      methods: {
        stashPageData() {
          return { data: { ...this.$data } }
        },
        restorePageData(oldData) {
          Object.assign(this.$data, oldData.data)
        },
      },
      
      onLoad() {
        if (this.$isPage()) {
          // 新進(jìn)入頁(yè)面
          Object.assign(this.$data, this.$options.data())
        }
      },
      
      onUnload() {
        if (this.$isPage()) {
          // 退出頁(yè)面，刪除數(shù)據(jù)
          delete pageDatas[this.$pageId()]
          this.$needReloadPageData = true
        }
      },
      
      onHide() {
        if (this.$isPage()) {
          // 將要隱藏時(shí)，備份數(shù)據(jù)
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },
      
      onShow() {
        if (this.$isPage()) {
          // 如果是后退回來(lái)的，拿出歷史數(shù)據(jù)來(lái)設(shè)置data
          if (this.$needReloadPageData) {
            const oldData = pageDatas[this.$pageId()]
            if (oldData) {
              this.restorePageData(oldData)
            }
            this.$needReloadPageData = false
          }
        }
      },
      
    })
  },
}

在main.js中引入 /src/main.js

import Vue from "vue"
import App from "./App"
import Hack from "./utils/Hack"


Vue.config.productionTip = false
App.mpType = "app"
Vue.use(Hack)

const app = new Vue(App)
app.$mount()

測(cè)試后發(fā)現(xiàn)ok了，但是這只是一個(gè)臨時(shí)解決方案，治標(biāo)不治本，還是希望官方盡快解決。

2. scroll-view 組件的一些問(wèn)題

其實(shí)吧，我并不推薦使用這個(gè)組件，也不是mpvue的問(wèn)題，就是這個(gè)組件本身就不太好用。

事件觸發(fā)不了的問(wèn)題

在mpvue中使用下面的一些事件的時(shí)候是不會(huì)觸發(fā)的

bindscrolltolower

bindscrolltoupper

bindscroll

解決方法你猜是什么？就是把bind去掉，哈哈哈

scrolltolower

scrolltoupper

scroll

然而，當(dāng) scroll-view 高度為 100% 的時(shí)候 bindscrolltolower 又不執(zhí)行了，解決方法是給外面的父元素加一些限制

.cat-scroll {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
}

這樣就解決了，但但但但但但但但是，這樣鋪滿(mǎn)屏幕后和小程序的下拉刷新沖突了，導(dǎo)致下拉刷新不執(zhí)行。WTF

回到我們開(kāi)頭說(shuō)的不用 scroll-view 我們用別的方法解決。首先我們使用 scroll-view的原因一般就是做一個(gè)下拉加載更多么，在小程序中頁(yè)面全局有一個(gè)滾動(dòng)到底部的事件 onReachBottom 我們只需要在這個(gè)事件里面寫(xiě)上拉加載更多就好了，和下拉刷新也不沖突。

export default {
    onPullDownRefresh(){
        //  下拉刷新
    },
    onReachBottom(){
        // 上拉加載更多
    }
}

3. slot 嵌套子模板的問(wèn)題

在新版本的mpvue中支持了 slot 這個(gè)功能，但是我勸大家不要用。問(wèn)題很多，父子之間傳值有各種問(wèn)題，我也沒(méi)找到很好的解決辦法，希望官方和社區(qū)繼續(xù)完善。

本文同步發(fā)表在github https://github.com/Jon-Millen...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97539.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mylxsw

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RAKsmart：爆款產(chǎn)品 $ 30秒殺，香港新增DDOS最高100G， VPS全場(chǎng)5折

閱讀 1479·2021-09-02 09:53
Sharktech：$129/月/2*E5-2678v3/64GB內(nèi)存/1TB NVMe硬盤(pán)/不限流

閱讀 2729·2021-07-29 13:50
iconfont在react中完整使用教程

閱讀 1774·2019-08-30 11:07
2019年5月所遇知識(shí)點(diǎn)整理

閱讀 1626·2019-08-30 11:00
flex布局的一些好帖子,你值得擁有

閱讀 1511·2019-08-29 14:00
你可能不知道的前端知識(shí)點(diǎn)

閱讀 1911·2019-08-29 12:52
CSS屬性中經(jīng)常出現(xiàn)的百分比

閱讀 2627·2019-08-29 11:11
Taro開(kāi)發(fā)小程序填坑筆記（一）

閱讀 3483·2019-08-26 12:23

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

mpvue“踩坑”指南

相關(guān)文章

mpvue實(shí)現(xiàn)微信小程序（歡迎踩坑）

mpvue實(shí)現(xiàn)微信小程序（歡迎踩坑）

mpvue實(shí)現(xiàn)微信小程序（歡迎踩坑）

小程序初踩坑

**美團(tuán)小程序框架mpvue蹲坑指南**

發(fā)表評(píng)論

0條評(píng)論

mylxsw

男|高級(jí)講師

TA的文章

RAKsmart：爆款產(chǎn)品 $ 30秒殺，香港新增DDOS最高100G， VPS全場(chǎng)5折

Sharktech：$129/月/2*E5-2678v3/64GB內(nèi)存/1TB NVMe硬盤(pán)/不限流

iconfont在react中完整使用教程

2019年5月所遇知識(shí)點(diǎn)整理

flex布局的一些好帖子,你值得擁有

你可能不知道的前端知識(shí)點(diǎn)

CSS屬性中經(jīng)常出現(xiàn)的百分比

Taro開(kāi)發(fā)小程序填坑筆記（一）

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

mpvue“踩坑”指南

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！