taro 滚动事件

taro scroll bug

ScrollView

https://nervjs.github.io/taro/docs/components/viewContainer/scroll-view.html

import Taro, { Component, Config } from '@tarojs/taro'
import {
View,
Text,
Image,
Icon,
Button,
Swiper,
SwiperItem,
ScrollView,
} from '@tarojs/components'
import './index.scss' const log = console.log; export default class MonthCalendar extends Component {
// config = {
// navigationBarTitleText: '日历-月历'
// }
static defaultProps = {
current: 0,
}
constructor () {
super(...arguments)
this.state = {
current: 0,
}
this.onScrollToLower = this.onScrollToLower.bind(this);
this.onScroll = this.onScroll.bind(this);
}
componentWillMount () { } componentDidMount () {} componentWillUnmount () { } componentDidShow () { } componentDidHide () { } onScrollToLower(e) {
log(`e to upper`, e)
}
onScroll(e) {
log(`e`, e)
}
render () {
return (
<ScrollView className='month-calendar-container'
scrollX
scrollWithAnimation
scrollTop='0'
style='height: 50px;'
lowerThreshold='20'
upperThreshold='20'
onScrollToLower={this.onScrollToLower}
onScroll={this.onScroll}>
<View className="month-calendar-item">A</View>
<View className="month-calendar-item">B</View>
<View className="month-calendar-item">C</View>
<View className="month-calendar-item">D</View>
<View className="month-calendar-item">E</View>
</ScrollView>
)
}
} // MonthCalendar.defaultProps = {
// current: 0,
// }

@charset "UTF-8";

.month-calendar-container{
box-sizing: border-box;
overflow-x: auto;
width: 100vw;
display: flex;
flex-flow: row;
// flex-wrap: nowrap;
// justify-content: center;
background: #F8F8F8;
padding: 2px;
} // .month-calendar-container::-webkit-scrollbar {
// display: none;
// width: 0 !important;
// height: 0 !important;
// background: transparent;
// } .month-calendar-item{
min-width: 200px;
height:50px;
background-color:rgb(26,173,25);
margin: 0 2px;
}

shit wx


xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


taro 滚动事件的更多相关文章

  1. taro 禁用滚动事件

    taro 禁用滚动事件 禁止 Modal 蒙层下面的页面的内容跟随滚动 https://github.com/NervJS/taro/issues/3980 https://github.com/Ne ...

  2. js鼠标滑轮滚动事件绑定(兼容主流浏览器)

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

  3. 鼠标滚动事件兼容性 wheel、onwheel

    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...

  4. JavaScript----分层导航 滚动事件

    分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  6. JS鼠标滚动事件

    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...

  7. Jquery-Mobile滚动事件

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  8. javascript滚动栏响应鼠标滑轮的实现上下滚动事件

    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...

  9. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Zookeeper语法

    ZooKeeper 是一个典型的分布式数据一致性解决方案,分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知.集群管理.Master 选举.分布式 ...

  2. python基础三---- time模块,函数的定义和调用

    此处重点说明一下: 注意: 1.用例之间不要存在依赖关系,每个用例都可以单独运行 2.用例不要互相调用,需要调用的公共方法可以写成方法去调用 1.等待 (在脚本运行的时候,有些线程之间需要间隔时间,可 ...

  3. MIT 6.S081 Lab File System

    前言 打开自己的blog一看,居然三个月没更新了...回想一下前几个月,开题 + 实验室杂活貌似也没占非常多的时间,还是自己太懈怠了吧,掉线城和文明6真的是时间刹手( 不过好消息是把15445的所有l ...

  4. (五)SpringBoot面试题

    SpringBoot面试题 1.Spring Boot 的自动配置是如何实现的? 2.shiro和oauth还有cas他们之间的关系是什么?问下您公司权限是如何设计,还有就是这几个概念的区别. 2.1 ...

  5. EIGRP和OSPF__邻居发现

    散知识点 1.当配置通配符时,它们的取值总是块尺寸减去1:/28的块尺寸为16,因此当我们添加网络声明时,使用了此子网号和一个在需配置的八位位组中添加值为15的通配符. 邻居发现 1.在EIGRP路由 ...

  6. Object类的常见方法总结

    ♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...

  7. C++多元组tuple使用方法?你熟悉吗?快来看看吧

  8. Educational Codeforces Round 90 (Rated for Div. 2) D. Maximum Sum on Even Positions(dp)

    题目链接:https://codeforces.com/contest/1373/problem/D 题意 给出一个大小为 $n$ 的数组 $a$,下标为 $0 \sim n - 1$,可以进行一次反 ...

  9. 【poj 2752】Seek the Name, Seek the Fame(字符串--KMP)

    题意:给出一个字符串str,求出str中存在多少子串,使得这些子串既是str的前缀,又是str的后缀.从小到大依次输出这些子串的长度. 解法:利用KMP中next[ ]数组的性质,依次找到前缀.后缀匹 ...

  10. 关于KMP算法的理解

    上次因为haipz组织的比赛中有道题必须用到KMP算法,因此赛后便了解了下它,在仔细拜读了孤~影神牛的文章之后有种茅塞顿开的感觉,再次ORZ. 附上链接http://www.cnblogs.com/y ...