Упругое скольжение на мобильном терминале и vue, записывающее положение скольжения

внешний интерфейс JavaScript
Упругое скольжение на мобильном терминале и vue, записывающее положение скольжения

- Введение в webkit-overflow-scrolling

-webkit-overflow-scrolling: auto  |  touch;

auto: Обычная прокрутка, когда палец убирается с сенсорного экрана, прокрутка сразу останавливается
touch: эффект отскока прокрутки, когда палец убирается с сенсорного экрана, содержимое сохраняет эффект прокрутки в течение определенного периода времени, а скорость и продолжительность прокрутки пропорциональны интенсивности жеста прокрутки. Также создается новый контекст стека.

Совместимое написание

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

как использовать

Над кодом:

<div class="scrollContainer">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
.scrollContainer{
    width: 100px;
    height: 50px;   
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;       
    overflow-x: hidden;    
}
.scrollContainer>ul>li{
    height: 20px;
    width: 100%;
}

возможные ошибки

  1. родительский элементscrollContainerплюс таргетингposition: absolute|relative, после нескольких свайпов прокручиваемая область застрянет и ее нельзя будет смахнуть
  2. При быстром смахивании страница будет казаться пустой, а содержимое не будет отображаться до тех пор, пока свайп не остановится.

На этом этапе вы должны дать родительскому элементуscrollContainerДобавьте следующий код:

//解决第一个bug
z-index:1;    

//解决第二个bug
-webkit-backface-visibility: hidden;    
-webkit-transform: translate3d(0,0,0);

нужно

В проекте vue мы можем столкнуться с такими требованиями, например:

На странице со списком продуктов нажмите на продукт, чтобы перейти на страницу сведений.

Вернитесь на страницу списка продуктов со страницы сведений, страница должна отображаться, как и раньше.

То есть положение полосы прокрутки должно кэшироваться;

идеи

  1. Список продуктов должен быть кэширован. Чтобы узнать, как кэшировать страницу, обратитесь к официальной документации vue.keep-aliveЧтобы кэшировать страницу, чтобы при возврате страницы сведений страница не перезагружалась.
  2. В жизненном цикле списка товаровactivated, следить за текущимscrollContainerСобытие прокрутки родительского элемента, в обратном вызове при прокрутке, получаетсяscrollTop(Расстояние полосы прокрутки от элемента прокрутки равноscrollContainerрасстояние) значение, хранящееся в и вdeactivatedУдаляет прослушиватель текущего события прокрутки из .
  3. В списке продуктов, когда вы нажимаете, чтобы перейти на страницу сведений, позиция полосы прокрутки кэшируется, и вы можете поместить ее вsessionStorage|localStorageсередина. Конечно, если вы используете vuex, вы можете напрямую поместить значение в vuex для управления;
  4. При возврате со страницы сведений делайте это одновременно и сохраняйте свои данные в кеше.scrollTopЗначение переназначается полосе прокрутки текущего div
  5. Хорошо, идея такая, все готово.

Конкретная реализация в vue

Я использую vuex для управления положением полосы прокрутки Код реализации выглядит следующим образом:

<div class="scrollContainer" ref="scroll">    //加了一个ref，用于获取当前dom 
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
computed:{
    ...mapGetters([
          "home_list_top"    //vuex中的存放的滚动条的位置
    ])
}
...
methods:{
    recordScrollPosition(e) {
      this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //实时存入到vuex中
    }
}
...
activated(){  //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了
    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值
    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加绑定事件
},
deactivated(){  //keep-alive 的页面跳转时，移除scroll事件
    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除绑定的scroll事件
}

позже

如果有更好的办法，互相交流。
Категории