scroll calendar & scroll view

scroll calendar & scroll view

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',
width: '100vw',
overflow: 'auto',
display: 'flex',
'flex-wrap': 'nowrap',
'flex-flow': 'row',
    }
const scrollTop = 0
const scrollLeft = 0
const Threshold = 20
const vStyleA = {
height: '50px',
width: '100px',
'min-width': '100px',
display: 'inline-block',
'background-color': 'rgb(26, 173, 25)'
    }
const vStyleB = {
height: '50px',
width: '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​​

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

​

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

---

xgqfrms