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

scroll calendar & scroll view

https://taro-docs.jd.com/taro/docs/components/viewContainer/scroll-view.html

https://developers.weixin.qq.com/miniprogram/dev/component/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'

import {
  AtTabs,
  AtTabsPane,
} from 'taro-ui'


const log = console.log;

export default class ScrollViewDemo extends Component {
  constructor() {
    super(...arguments)
  }

  onScrollToUpper() {}
  onScrollToLower() {}

  // or 使用箭头函数
  // onScrollToUpper = () => {}

  onScroll(e){
    // console.log(e.detail)
  }

  render() {
    const scrollStyle = {
      height: '50px',
       '100vw',
      overflow: 'auto',
      display: 'flex',
      'flex-wrap': 'nowrap',
      'flex-flow': 'row',
    }
    const scrollTop = 0
    const scrollLeft = 0
    const Threshold = 20
    const vStyleA = {
      height: '50px',
       '100px',
      'min-width': '100px',
      display: 'inline-block',
      'background-color': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
       height: '50px',
        '100px',
       'min-width': '100px',
       display: 'inline-block',
      'background-color': 'rgb(39,130,215)'
    }
    const views = [...new Uint8Array(10).map((item, i) => (item = i))].map(item => <View style={item % 2 === 0 ? vStyleA : vStyleB}>A{item}</View>);
    return (
      <ScrollView
        className='scrollview'
        scrollX
        // scrollIntoView
        scrollWithAnimation
        scrollLeft={scrollLeft}
        style={scrollStyle}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
        onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
        onScrollToLower={this.onScrollToLower.bind(this)}
        onScroll={this.onScroll}
      >
        {views}
      </ScrollView>
    )
    // return (
    //   <ScrollView
    //     className='scrollview'
    //     scrollY
    //     scrollWithAnimation
    //     scrollTop={scrollTop}
    //     style={scrollStyle}
    //     lowerThreshold={Threshold}
    //     upperThreshold={Threshold}
    //     onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
    //     onScroll={this.onScroll}
    //   >
    //     {views}
    //   </ScrollView>
    // )
  }
}

scroll distance

??? update scrollLeft value

offset

alipay

h5

srcElement.offsetLeft

---

taro 小程序如何获取屏幕宽度

https://nervjs.github.io/taro/docs/apis/device/systeminfo/getSystemInfoSync.html

小程序如何获取屏幕宽度？

https://juejin.im/post/5c7e3298f265da2dbe0306dd

import Taro from '@tarojs/taro'

const res = Taro.getSystemInfoSync()
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)

OK

---