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. Privacy-Enhanced Mail (PEM) Privacy Enhancement for Internet Electronic Mail

    小结 1. 加密基本流程 本地格式标准格式认证(填充与完整性检查)与加密可打印编码 Privacy-Enhanced Mail (PEM) RFC 2313 - PKCS #1: RSA Encryp ...

  2. Spring Cloud系列之Commons - 1. 背景与基础知识准备

    本文基于 Spring Cloud 2020.0 发布版的依赖 本系列会深入分析 Spring Cloud 的每一个组件,从Spring Cloud Commons这个 Spring Cloud 所有 ...

  3. 哈希索引和Btree索引的比较

    索引是帮助mysql获取数据的数据结构.最常见的索引是Btree索引和Hash索引. 不同的引擎对于索引有不同的支持:Innodb和MyISAM默认的索引是Btree索引:而Mermory默认的索引是 ...

  4. GIS基本概念,空间分析

    GIS基本概念,空间分析 一.GIS基本概念 1.1 要素模型(Feature) 1.2 矢量数据 1.3 空间分析 1.3.1 空间查询和空间量算 1.3.2 缓冲区分析 1.3.3 叠加分析 1. ...

  5. Java实现发送HTTP的POST请求,返回数据以及请求状态

    /** * @param url:请求url * @param content: 请求体(参数) * @return errorStr:错误信息;status:状态码,response:返回数据 */ ...

  6. java切割~~百万 十万 万 千 百 十 个 角 分

    /** * @param value * @return */ @SuppressWarnings("unused") public static void convertLoan ...

  7. (26)Vim 2

    1.Vim 查找文本 /abc 从光标所在位置向前查找字符串 abc /^abc 查找以 abc 为行首的行 /abc$ 查找以 abc 为行尾的行 ?abc 从光标所在为主向后查找字符串 abc n ...

  8. codeblocks输出中文乱码解决办法

    在使用codeblocks进行编程的时候我发现控制台输出会出现中文乱码,就像这样: 所以很快我就问了老师,解决步骤如下: 一:如果源码是用codeblock编写的,打开Setting->Edit ...

  9. C - Door Man(欧拉回路_格式控制)

    现在你是一个豪宅的管家,因为你有个粗心的主人,所以需要你来帮忙管理,输入会告诉你现在一共有多少个房间,然后会告诉你从哪个房间出发,你的任务就是从出发的房间通过各个房间之间的通道,来把所有的门都关上,然 ...

  10. Codeforces Global Round 8 B. Codeforces Subsequences(构造)

    题目链接:https://codeforces.com/contest/1368/problem/B 题意 构造最短的至少含有 $k$ 个 $codeforces$ 子序列的字符串. 题解 如下表: ...