taro 滚动事件
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 滚动事件的更多相关文章
- taro 禁用滚动事件
taro 禁用滚动事件 禁止 Modal 蒙层下面的页面的内容跟随滚动 https://github.com/NervJS/taro/issues/3980 https://github.com/Ne ...
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
- 鼠标滚动事件兼容性 wheel、onwheel
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
- JavaScript----分层导航 滚动事件
分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- Jquery-Mobile滚动事件
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Service Mesh 在百度网盘数万后端的落地实践
https://www.infoq.cn/article/vpa6aypkizuqiijzflih
- list中map 的value值时间排序
public static void main(String[] args) { String sys=DateUtil.getTime().substring(0,5); System.out.pr ...
- fastHttp服务端处理请求的过程
Github 地址 https://github.com/valyala/fasthttp fastHttp 服务端的处理请求的过程 工作过程 主要代码 设置监听地址 server.go func ( ...
- 寻找最小字符串,IP地址——解题报告
寻找最小字符串 题目 思路 在寻找最小字符串的时候需要用到的函数有strcmp和strcpy,首先先输入输入字符串,先假设第一个字符串为最小的字符串min,再然比较接下来的字符串,当接下来的字符串比m ...
- juniper srx系列配置端口映射 转载
http://www.cnblogs.com/pinpin/p/9895815.html
- SealClient
import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOException; import ja ...
- (22)zip命令:压缩文件或目录&&unzip命令:解压zip文件
1.zip 命令基本格式如下: [root@localhost ~]#zip [选项] 压缩包名 源文件或源目录列表 注意,zip 压缩命令需要手工指定压缩之后的压缩包名,注意写清楚扩展名,以便解压缩 ...
- Codeforces错题本
为什么我这么菜啊QAQ Codeforces 1364C
- 1. Machine Learning - Introduction
Speaker: Andrew Ng 1. Introduction 1.A comptuter program is said to learn from experience E with r ...
- Codeforces Round #646 (Div. 2) 题解 (ABCDE)
目录 A. Odd Selection B. Subsequence Hate C. Game On Leaves D. Guess The Maximums E. Tree Shuffling ht ...