Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。
import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components';
import PropTypes from 'prop-types';
import './MySlider.scss';
export default class MySlider extends Component {
static propTypes = {
banner: PropTypes.array,
};
static defaultProps = {
banner: [],
};
state = {
current: 0
}
swiperChange = (e) => {
this.setState({
current: e.detail.current
})
}
render() {
const { banner } = this.props;
const { current } = this.state;
return (
<View className='wrapper'>
<Swiper
className='swiper-container'
circular
autoplay
onChange={ this.swiperChange }
current={ current }
>
{ banner.map((item, index) => (
<SwiperItem key={index}>
<Image className='swiper-img' mode='widthFix' src={item.src}></Image>
</SwiperItem>
))}
</Swiper>
<View className='pageState'>{current + 1}/{ banner.length }</View>
</View>
)
}
}
需要同时在组件上绑定current属性。
Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。的更多相关文章
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- manjaro xfce 18.0 踩坑记录
manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...
- Spark Ignite踩坑记录
Ignite spark 踩坑记录 简述 ignite访问数据有两种模式: Thin Jdbc模式: Jdbc 模式和Ignite client模式: shell客户端输出问题,不能输出全列: 针对上 ...
- unionId突然不能获取的踩坑记录
昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...
- CentOS7.4安装MySQL踩坑记录
CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...
- ubuntu 下安装docker 踩坑记录
ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- Metasploit 使用MSFconsole接口
什么是MSFconsole? 该msfconsole可能是最常用的接口使用Metasploit框架(MSF).它提供了一个“一体化”集中控制台,并允许您高效访问MSF中可用的所有选项.MSFconso ...
- tensorflow run()和 eval()
eval()只能用于tf.Tensor类对象,也就是有输出的Operation.对于没有输出的Operation, 可以用.run()或者Session.run() 所以我们训练的时候,对于优化器只能 ...
- NodeJS学习笔记之Connect中间件模块(二)
一,开篇分析 大家好,今天这篇文章主要是对"Connect"中间件以及相关辅助中间件,做一个源码分析系列,我想上一篇文章大家也看了, 介绍了使用方式及用途,而这篇也是出于本人的兴趣 ...
- API文档管理工具
系统庞大之后,前后端分离开发,前端调用后端提供的接口,请求协议一般是 HTTP,数据格式一般是 JSON.后台只负责数据的提供和计算,而完全不处理展现逻辑和样式:前端则负责拿到数据,组织数据并展现的工 ...
- jdbc出现中文乱码的解决办法
- 2018-10-29-微软-Tech-Summit-技术暨生态大会课程-·-基于-Roslyn-打造高性能预编译框架...
title author date CreateTime categories 微软 Tech Summit 技术暨生态大会课程 · 基于 Roslyn 打造高性能预编译框架 lindexi 2018 ...
- tp5.0x代码执行
1.拿到站首先平复一下心情 看了一下robots.txt结构像dedecms,网站还存在CDN,日了狗看到这里其实都想放弃来着,懒癌晚期,然后接着使用云悉平台走了一波,看了一下得到真实IP,看来只给w ...
- The linux command 之 扩展
echo * " * "字符意味着匹配文件名中的任意字符,shell会在执行echo命令之前把*扩展成其他内容. 一.路径扩展(pathname Expansion) 通过使用通配 ...
- Error parsing XML: junk after document element这样的错误 - CSDN博客
很多开发者可能在编写XML布局文件时提示Error parsing XML: junk after document element这样的错误,这里Android123提示大家一般合法的XML文件只有 ...
- PPM 信号解析
PWM信号 PWM信号用于控制单个电调或者单个舵机脉冲宽度调制信号. 像华科尔DEVO 10遥控接收器(RX1002)就输出10路PWM,参看下图. 舵机(电调)上用到PWM信号种类很多,我们这里对常 ...