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导致组件不能滚动。的更多相关文章

  1. [技术博客]iview组件样式踩坑记录

    [技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...

  2. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  3. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  4. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  5. Spark Ignite踩坑记录

    Ignite spark 踩坑记录 简述 ignite访问数据有两种模式: Thin Jdbc模式: Jdbc 模式和Ignite client模式: shell客户端输出问题,不能输出全列: 针对上 ...

  6. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

  7. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

  8. ubuntu 下安装docker 踩坑记录

    ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...

  9. SpringBoot + Shiro + shiro.ini 的踩坑记录

    0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...

随机推荐

  1. XDTIC2019招新笔试题 + 官方解答

    腾讯创新俱乐部2019年招新笔试试题   [1] 小宗学长正在努力学习数论,他写下了一个奇怪的算式: \[ 2019^{2018^{2017^{\dots^{2^1}}}} \] 算式的结果一定很大, ...

  2. 20140408 父类指针指向子类对象 ;delete ;static作用

    1.父类指针可以指向子类对象 静态联翩:如果以父类指针指向派生类对象,那么经由该指针只能访问父类定义的函数 动态联编:根据指针实际指向的对象类型确定 2.面试宝典 P110 面试题5  #includ ...

  3. ES6新的特性有哪些?

    1.新增了块级作用域(let,const) 2.提供了定义类的语法糖(class) 3.新增了一种基本数据类型(Symbol) 4.新增了变量的解构赋值 5.函数参数允许设置默认值,引入了rest参数 ...

  4. windows下安装sass,以及常见错误和解决办法

    简介: sass依赖于ruby环境,安装sass之前得先装ruby. 1.安装ruby 1.1.下载地址:http://rubyinstaller.org/downloads 1.2.注意事项:安装时 ...

  5. Markdown文档常用字体及颜色设置

    1.字体.字号.颜色设置 <font face="微软雅黑" >微软雅黑字体</font> <font face="黑体" > ...

  6. mysql8以上版本时区问题:The server time zone value乱码XXXX

    异常类似: The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone. ...

  7. Python: 比较两个字典是否相等

    有些情况下会遇到比较两个字典是否相等的问题 直观来想,会比较键是否一致,其对应的值是否相等 python中,还有有另外两种方法: 直接使用== a = {'a': 1, 'b': 2} b = {'a ...

  8. 初识OpenCV-Python - 001

    主要用代码注释来初步学习OpenCV-Python 1. 图片初使用(结合matplotlib) import cv2from matplotlib import pyplot as plt #Loa ...

  9. spring MVC 全局的异常处理

    1.使用SimpleMappingExceptionResolver实现异常处理 在Spring的配置文件applicationContext.xml中增加以下内容: <bean class=& ...

  10. iOS 工程实现native 跳转指定的Flutter 页面

    概要 在前一篇文章中我们提到,iOS跳转到Flutter工程指定页面时(多个),Flutter只有单例,设置setInitialRouter 无效,如下 let flutterViewControll ...