zoukankan      html  css  js  c++  java
  • 微信小程序scroll-view实现按页滚动

    1.wxml

     <scroll-view class="scroll-view_H" scroll-x style=" 100%" scroll-into-view="{{toView}}" scroll-left="{{scrollTop}}" bindscrolltoupper="upper" bindscrolltolower="lower"   bindtouchstart="onTouchstartArticles" bindtouchend="onTouchendArticles" >
        <view id="green"  class="scroll-view-item_H bc_green"></view>
        <view id="red"    class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue"   class="scroll-view-item_H bc_blue"></view>
      </scroll-view>

    2.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
         toView:"green",
         scrollTop:0,
         startTouchs: {
           x: 0,
           y: 0
         }
      },
    
    upper:function(e){
      console.log(e),
      console.log("在深圳只有不断的向前跑才能看见自己的出路")
    },
    
    lower:function(e){
      console.log(e),
        console.log("你不努力谁替你坚强")
    
      
    },
    
    scroll:function(e){
      console.log(e),
      console.log("可是回家又能做些什么呢")
    },
    
    tap:function(e) {
      for(var i = 0 ; i < order.length; i++){
        if(order[i] === this.data.toView){
          this.setData({
            toView:order[i + 1]
          })
          break
        }
      }
    },
    tapMove: function (e) {
      this.setData({
        scrollTop: this.data.scrollTop + 10
      })
    },

      滚动条样式修改(滚动条隐藏)

    ::-webkit-scrollbar{
     0;
    height: 0;
    color: transparent;
    }
  • 相关阅读:
    Android PopupWindow显示位置和显示大小
    线性回归与梯度下降
    nginx启动过程分析
    项目管理学习笔记之三.绩效分析
    会计总论读书笔记
    电子书阅读及工具
    mybatis-mysql小优化
    List去重
    JAVA8之lambda表达式详解,及stream中的lambda使用
    linux部署mongodb及基本操作
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/12357502.html
Copyright © 2011-2022 走看看