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. Metasploit 使用MSFconsole接口

    什么是MSFconsole? 该msfconsole可能是最常用的接口使用Metasploit框架(MSF).它提供了一个“一体化”集中控制台,并允许您高效访问MSF中可用的所有选项.MSFconso ...

  2. tensorflow run()和 eval()

    eval()只能用于tf.Tensor类对象,也就是有输出的Operation.对于没有输出的Operation, 可以用.run()或者Session.run() 所以我们训练的时候,对于优化器只能 ...

  3. NodeJS学习笔记之Connect中间件模块(二)

    一,开篇分析 大家好,今天这篇文章主要是对"Connect"中间件以及相关辅助中间件,做一个源码分析系列,我想上一篇文章大家也看了, 介绍了使用方式及用途,而这篇也是出于本人的兴趣 ...

  4. API文档管理工具

    系统庞大之后,前后端分离开发,前端调用后端提供的接口,请求协议一般是 HTTP,数据格式一般是 JSON.后台只负责数据的提供和计算,而完全不处理展现逻辑和样式:前端则负责拿到数据,组织数据并展现的工 ...

  5. jdbc出现中文乱码的解决办法

  6. 2018-10-29-微软-Tech-Summit-技术暨生态大会课程-·-基于-Roslyn-打造高性能预编译框架...

    title author date CreateTime categories 微软 Tech Summit 技术暨生态大会课程 · 基于 Roslyn 打造高性能预编译框架 lindexi 2018 ...

  7. tp5.0x代码执行

    1.拿到站首先平复一下心情 看了一下robots.txt结构像dedecms,网站还存在CDN,日了狗看到这里其实都想放弃来着,懒癌晚期,然后接着使用云悉平台走了一波,看了一下得到真实IP,看来只给w ...

  8. The linux command 之 扩展

    echo * " * "字符意味着匹配文件名中的任意字符,shell会在执行echo命令之前把*扩展成其他内容. 一.路径扩展(pathname Expansion) 通过使用通配 ...

  9. Error parsing XML: junk after document element这样的错误 - CSDN博客

    很多开发者可能在编写XML布局文件时提示Error parsing XML: junk after document element这样的错误,这里Android123提示大家一般合法的XML文件只有 ...

  10. PPM 信号解析

    PWM信号 PWM信号用于控制单个电调或者单个舵机脉冲宽度调制信号. 像华科尔DEVO 10遥控接收器(RX1002)就输出10路PWM,参看下图. 舵机(电调)上用到PWM信号种类很多,我们这里对常 ...