最近,在用swiper组件,初始化显示第几个slide,我用current,设置值,发现没有效果,始终都是第一张,有解决的么?
X
xiangcaozhu
@xiangcaozhu
0
声望
4
帖子
801
资料浏览
0
粉丝
0
关注
xiangcaozhu 发布的帖子
-
RE: Taro组件Swiper组件,onChange中setState,时,会导致不停的调用
-
RE: ScrollView上拉加载更多和下拉刷新不起作用
我也遇到这个问题,无法禁止微信默认的查看来源。禁用了下拉也会有问题。只能在h5下用。
后来勉强封装了一个,微信中要轻轻的下拉,暂停一会,才能触发,否则根本不会触发thouchend事件,所以,用cancel事件来复原下拉,要不在微信就没法复原了。我的封装组件:import Taro, { Component } from '@tarojs/taro'; import { ScrollView, View } from '@tarojs/components'; import { AtActivityIndicator } from 'taro-ui'; import { getWindowHeight } from '@/utils/utils'; import './index.scss'; // 楼宇选择器 export default class WScroll extends Component { static defaultProps = { height: getWindowHeight(false, 0), upperThreshold: 50, lowerThreshold: 50, scrollY: true, onScroll: () => {}, onScrollToUpper: () => {}, onScrollToLower: () => {}, reload: () => {} }; constructor (props) { super(props) this.state = { // eslint-disable-next-line react/no-unused-state scrollTop: 0, downText: '下拉刷新', hide: true, // 提示元素隐藏 // eslint-disable-next-line react/no-unused-state flage: false, // 执行刷新函数标志位 // eslint-disable-next-line react/no-unused-state transitionWidth: 0 // 保证能进入【下拉刷新】就能继续【释放更新】的变量, } } componentDidMount = () => { if (process.env.TARO_ENV === 'h5') { this.wrapBoxHandle() this.refresh() } }; // 滚动时触发 onScroll = event => { // 只有scrollTop为0,才可以下拉刷新 if (event.detail.scrollTop <= 100) { // eslint-disable-next-line react/no-unused-state this.setState({ scrollTop: event.detail.scrollTop }) } this.props.onScroll(event) }; // 滚动到顶部/左边,会触发 scrolltoupper 事件 onScrollToUpper = event => { this.props.onScrollToUpper(event) }; // 滚动到底部/右边,会触发 scrolltolower 事件,滚动底部,下一页 onScrollToLower = event => { this.props.onScrollToLower(event) }; refresh = () => { // 下拉刷新功能函数 let that = this let _element = document.getElementById('refreshContainer'), _startPos = 0, _startX = 0, _transitionWidth = 0, _transitionHeight = 0 _element.addEventListener( 'touchstart', function (e) { _startPos = e.touches[0].pageY _startX = e.touches[0].pageX _element.style.position = 'relative'; _element.style.transition = 'transform 0s'; that.setState({ flage: false }) }, false ) _element.addEventListener( 'touchmove', function (e) { if (that.state.transitionWidth === 0) { // 阻止其频繁变动,保证能进入【下拉刷新】就能继续【释放更新】 _transitionWidth = Math.abs(e.touches[0].pageX - _startX) // 防止横向滑动 } _transitionHeight = e.touches[0].pageY - _startPos if ( that.state.scrollTop === 0 && _transitionWidth < 10 && _transitionHeight > 0 && _transitionHeight < 60 ) { that.setState({ hide: false, downText: '下拉刷新', transitionWidth: _transitionWidth // 保证能进入【下拉刷新】就能继续【释放更新】 }) if (_transitionHeight > 30) { _element.style.transform = 'translateY(30px)'; that.setState({ downText: '释放更新', flage: true, transitionWidth: 0 // 一个流程走完,重置 }) } } }, false ) _element.addEventListener( 'touchend', function (e) { _element.style.transition = 'transform 0.5s'; _element.style.transform = 'translateY(0px)'; if (that.state.flage) { // 标志下滑的值达到刷新,就执行刷新函数 that.setState({ downText: '正在刷新...' }) that.props.reload({ type: 'refresh', page: 1 }).then(() => { that.setState({ hide: true }) }) } else { that.setState({ hide: true }) } }, false ) _element.addEventListener( 'touchcancel', function (e) { _element.style.transition = 'transform 0.5s'; _element.style.transform = 'translateY(0px)'; that.setState({ hide: true }) }, false ) }; wrapBoxHandle = () => { // 兼容Android,解决下拉触发微信网页的下拉。 let that = this let _element = document.getElementById('app'), _startPos = 0, _transitionHeight = 0 _element.addEventListener( 'touchstart', function (e) { _startPos = e.touches[0].pageY }, false ) _element.addEventListener( 'touchmove', function (e) { _transitionHeight = e.touches[0].pageY - _startPos console.log(that.state.scrollTop, _transitionHeight) if (that.state.scrollTop === 0 && _transitionHeight > 0) { // 位于滚动元素顶部并且向下滑动时 e.preventDefault() // 取消事件的默认动作。可屏蔽android端微信网页自带的拉下动作。 } }, false ) }; render () { const { downText, hide } = this.state const { height, lowerThreshold, upperThreshold, scrollY } = this.props return ( <View className='wx-scroll' style={{ height: height }}> {!hide && ( <View className='wx-scroll__down'> <AtActivityIndicator content={downText}></AtActivityIndicator> </View> )} <ScrollView id='refreshContainer' scrollWithAnimation className='wx-scroll-view' scrollY={scrollY} style={{ height: height }} lowerThreshold={lowerThreshold} upperThreshold={upperThreshold} onScrollToLower={this.onScrollToLower} onScrollToUpper={this.onScrollToUpper} onScroll={this.onScroll} > <View id='RefreshContainer-scroll'>{this.props.children}</View> </ScrollView> </View> ) } }