xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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;
   100vw;
  display: flex;
  flex-flow: row;
  // flex-wrap: nowrap;
  // justify-content: center;
  background: #F8F8F8;
  padding: 2px;
}

// .month-calendar-container::-webkit-scrollbar {
//   display: none;
//    0 !important;
//   height: 0 !important;
//   background: transparent;
// }

.month-calendar-item{
  min- 200px;
  height:50px;
  background-color:rgb(26,173,25);
  margin: 0 2px;
}

shit wx

---

©xgqfrms 2012-2020

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

---