<acronym id="indot"><dfn id="indot"></dfn></acronym>
<span id="indot"></span>

<bdo id="indot"><meter id="indot"></meter></bdo>
<label id="indot"><samp id="indot"></samp></label>
<label id="indot"><xmp id="indot">
  • <span id="indot"><table id="indot"></table></span>
    <center id="indot"><optgroup id="indot"></optgroup></center>
  • <bdo id="indot"><meter id="indot"></meter></bdo>
      當前位置:首頁 > javascript > vue > 正文內容

      uniapp 中 ScrollView 組件上拉分頁怎么不滾動到最頂部

      hxing6412年前 (2023-11-07)vue2405


      實現類似微信聊天頁面,上拉加載更多歷史聊天記錄,每次上拉到頂部,界面自動會滾動到最頂部,我希望ScrollView不要滾動到最頂部,每次就停留在當前位置


      1,綁定scroll-view中scroll-into-view屬性

      <scroll-view class="scroll-view"  :scroll-y="true"  :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>


      2,將scroll-view中包裹元素設置flex樣式

      <scroll-view class="scroll-view"  :scroll-y="true"  :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory">
          <view id="scroll-view-content" >
              <view class="item" v-for="item in list">{{item.name}}</view>
          </view>
      </scroll-view>



      css代碼:


      #scroll-view-content {
          display: flex;
          flex-direction: column-reverse;
      }



      3,綁定數據list,獲得的數據為data,以下為實現代碼


      loadHistory: function () {    
          if (data.length) {
            let start = this.list.length
          for (let i = start; i < start + data.length; i++) {
              const item = data[i - start] // 拿到data遍歷的item
              this.list.push(item)
          }
          this.scrollViewIntoView = "view" + this.msgList[start - 1].id  // 設置當前滾動到的元素(加載前最后一個元素)
      }





      掃描二維碼推送至手機訪問。

      版權聲明:本文由星星博客發布,如需轉載請注明出處。

      本文鏈接:http://www.7811333.com/?id=449

      分享給朋友:

      “uniapp 中 ScrollView 組件上拉分頁怎么不滾動到最頂部” 的相關文章

      vue3 插件開發

      vue3 插件開發

      插件是向vue添加全局功能。你如果是一個對象需要提供install方法,你如果是function就直接當install 方法去使用。寫一個loading組件供全局使用:1)目錄結構index.ts文件內容:import { createVNode, render,&nb...

      uniapp h5設置代理解決跨域問題

      在manifest.json文件中 h5 屬性中加入如下代碼:"h5": {     "devServer": {       &nbs...

      【Vue】詳解Vue組件系統

      Vue是一款流行的JavaScript框架,它的組件系統是它最重要的特性之一。Vue組件系統允許開發人員將UI界面劃分成獨立、可重復使用的組件,從而提高代碼的可維護性和可重用性。本文將詳細介紹Vue組件系統的各個方面。組件的定義在Vue中,一個組件是由一個Vue實例構成的。組件通常包含一個模板、一個...

      深入探索Vue自定義過濾器

      Vue.js是一種流行的JavaScript框架,提供了很多有用的功能來構建交互式的Web應用程序。其中一個非常有用且經常被忽視的功能是自定義過濾器。通過使用自定義過濾器,我們可以在Vue應用程序中輕松地轉換、格式化和處理數據。本文將深入探索Vue自定義過濾器的使用方法和實際應用。一、什么是Vue自...

      Vue中的父子組件通訊及使用sync同步父子組件數據

      在Vue.js中,組件通訊是一個非常重要的主題。特別是在處理父子組件之間的通訊時,我們需要了解不同的方式來傳遞數據和響應事件。本文將介紹Vue中父子組件通訊的幾種方式,并重點討論使用sync屬性來實現父子組件數據的雙向綁定。父子組件通訊 在Vue中,父組件可以通過prop向子組件傳遞數據,而子組件則...

      發表評論

      訪客

      ◎歡迎參與討論,請在這里發表您的看法和觀點。
      主站蜘蛛池模板: 色综合99久久久无码国产精品| 亚洲综合在线一区二区三区 | 色诱久久久久综合网ywww| 亚洲国产成人久久综合碰 | 国产综合无码一区二区色蜜蜜| 一本色道久久88综合日韩精品| 亚洲综合一区二区国产精品| 热久久综合这里只有精品电影| 国产一级a爱做综合| 色噜噜狠狠狠狠色综合久| 伊人色综合久久天天人手人婷| 亚洲AV综合色区无码二区偷拍 | 久久综合久久鬼色| 小说区综合区首页| 久久综合久综合久久鬼色| 国产精品综合色区在线观看| 成人综合久久综合| 曰韩人妻无码一区二区三区综合部| 丁香五月亚洲综合深深爱| 国产亚洲精品第一综合| 色综合色综合久久综合频道| 一本色道久久综合狠狠躁| 人人狠狠综合久久亚洲高清| 婷婷激情综合色五月久久| 国产成人综合一区精品| 久久综合给合久久狠狠狠97色69| 97久久国产综合精品女不卡| 国产精品亚洲综合一区| 国产精品激情综合久久| 狠狠88综合久久久久综合网| 久久久久久久尹人综合网亚洲| 国内精品综合久久久40p| 亚洲综合无码一区二区| 久久婷婷综合中文字幕| 久久久久久综合网天天| 色之综合天天综合色天天棕色| 色综合久久天天综合绕观看| 色噜噜狠狠狠色综合久| 狠狠色丁香婷婷综合尤物| 色综合中文综合网| 色天天综合色天天碰|