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

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

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


scroll calendar & scroll view的更多相关文章

  1. scrollTo & js auto scroll & scrollX & scrollY

    scrollTo & js auto scroll & scrollX & scrollY scrollX & scrollY 获取 scroll top height ...

  2. Understanding Scroll Views 深入理解 scroll view 读书笔记

    Understanding Scroll Views 深入理解 scroll view  读书笔记   It may be hard to believe, but a UIScrollView is ...

  3. [Android实例] Scroll原理-附ScrollView源码分析

    想象一下你拿着放大镜贴很近的看一副巨大的清明上河图, 那放大镜里可以看到的内容是很有限的, 而随着放大镜的上下左右移动,就可以看到不同的内容了 android中手机屏幕就相当于这个放大镜, 而看到的内 ...

  4. [Android实例] Scroll原理-附ScrollView源码分析 (转载)

    想象一下你拿着放大镜贴很近的看一副巨大的清明上河图, 那放大镜里可以看到的内容是很有限的, 而随着放大镜的上下左右移动,就可以看到不同的内容了 android中手机屏幕就相当于这个放大镜, 而看到的内 ...

  5. scroll pagination.js数据重复加载、分页问题

    scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/1753242 ...

  6. JavaScript 特效之四大家族(offset/scroll/client/event)

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  7. 使用Json封装scroll,已处理其兼容性问题

    scroll.js /* 使用Json封装scroll */ function scroll(){ //标准模式(遵循W3C标准) if(pageYOffset!==null){ return { t ...

  8. Elasticsearch - Scroll

    Scroll Version:6.1 英文原文地址:Scroll 当一个搜索请求返回单页结果时,可以使用 scroll API 检索体积大量(甚至全部)结果,这和在传统数据库中使用游标的方式非常相似. ...

  9. [UE4]Scroll Box带滚动条的容器

    一.黑边,当可以往下滚动的时候,下边会出现黑边.当可以往上滚动的时候,上边也会出现黑边.   Scroll Box.Style.Style:也可以自定义上下左右黑边的样式: 二.Scroll Box. ...

随机推荐

  1. linux 文件结构体和文件描述符号的学习

    https://blog.csdn.net/cywosp/article/details/38965239

  2. 用好Java中的枚举真的没有那么简单

    1.概览 在本文中,我们将看到什么是 Java 枚举,它们解决了哪些问题以及如何在实践中使用 Java 枚举实现一些设计模式. enum关键字在 java5 中引入,表示一种特殊类型的类,其总是继承j ...

  3. luoguP6754 [BalticOI 2013 Day1] Palindrome-Free Numbers

    目录 luoguP6754 [BalticOI 2013 Day1] Palindrome-Free Numbers 简述题意: Solution: Code luoguP6754 [BalticOI ...

  4. 踹树(Trie 字典树)

    Trie 字典树 ~~ 比 KMP 简单多了,无脑子选手学不会KMP,不会结论题~~ 自己懒得造图了OI WIKI 真棒 字典树大概长这么个亚子 呕吼真棒 就是将读进去的字符串根据当前的字符是什么和所 ...

  5. Vue技术点整理-Vuex

    什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...

  6. WLAN参数释义及优化建议

    1.AP覆盖范围或天线角度 1)参数释义 AP覆盖范围或天线角度直接影响到了终端连接到WLAN的信号强度. 2)优化建议 在设备的工程安装过程中,合理选择AP的位置,合理调整AP的覆盖方向或外置天线的 ...

  7. 设计模式(十二)——享元模式(Integer缓冲池源码分析)

    1 展示网站项目需求 小型的外包项目,给客户 A 做一个产品展示网站,客户 A 的朋友感觉效果不错,也希望做这样的产品展示网站,但是要求都有些不同: 1) 有客户要求以新闻的形式发布 2) 有客户人要 ...

  8. Java创建线程四种方式

    1.继承Thread类 public class MyThread extends Thread { public MyThread() { } public void run() { for(int ...

  9. idea使用maven的打包工具package不会打上主类解决方法

  10. 2288.【POJ Challenge】生日礼物 链表+堆+贪心

    BZOJ2288 [POJ Challenge]生日礼物 题意: 给一个长度为\(n\)的数组,最多可以选\(m\)个连续段,问选取的最大值是多少 题解: 先把连续的符号相同的值合并,头和尾的负数去掉 ...