taro 滚动事件
2024-10-19 03:22:45
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 发布文章使用：只允许注册用户才可以访问！
最新文章
- μC/OS-Ⅲ系统的任务切换和任务调度
- myeclipse 常用快捷键总结
- 交易策略研究 R库
- Axure RP的版本控制
- 今天愉快的hack小记
- IOS基于新浪微博开放平台微博APP
- MVC-06 安装部署
- Broadcast Reveiver作用
- Spring Security教程系列（一）基础篇-2
- [Luogu2617]Dynamic Rankings（整体二分）
- 论文笔记：Deep feature learning with relative distance comparison for person re-identification
- [Python数据挖掘]第6章、电力窃漏电用户自动识别
- react 粗略使用
- ajax跨域请求のJSONP
- jsp学习之包含——include
- SpringBoot集成MyBatis的分页插件PageHelper
- ios中打包
- 配置caffe中出现的问题汇总
- 【转】 如何利用C#代码来进行操作AD
- 二十五、详述 IntelliJ IDEA 提交代码前的 Code Analysis 机制