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. MySQL数据库中,将一个字段的值分割成多条数据显示

    本文主要记录如何在MySQL数据库中,将一个字符串分割成多条数据显示. 外键有时是以字符串的形式存储,例如 12,13,14 这种,如果以这种形式存储,则不能直接与其他表关联查询,此时就需要将该字段的 ...

  2. nodejs--express安装失败的原因

    1.检查更新所有的npm ,jade,或者ejs. 2.在用jade或ejs也是有区别的,jade适合个人秀,ejs更实用与商务. 3.express在4.+之后的版本都分离了,推荐用3.+的版本稳定 ...

  3. 注意:字符串substring方法在jkd6,7,8中的差异。

    标题中的substring方法指的是字符串的substring(int beginIndex, int endIndex)方法,这个方法在jdk6,7是有差异的. substring有什么用? sub ...

  4. unittest(1)

    一.unittest核心概念 1.unittest四个核心概念 unittest四个核心概念包括:TestCase.TestSuite.TestRunner.Test Fixture TestCase ...

  5. python学习5—一些关于基本数据结构的练习题

    python学习5—一些关于基本数据结构的练习题 # 1. use _ to connect entries in a list # if there are no numbers in list l ...

  6. sklearn中回归器性能评估方法

    explained_variance_score() mean_absolute_error() mean_squared_error() r2_score() 以上四个函数的相同点: 这些函数都有一 ...

  7. 应用Dubbo框架打造仿猫眼项目 理解微服务核心思想

    1:传统应用带来的问题 单一业务开发的迭代问题              扩容困难              部署回滚困难2:微服务概述 微服务是一种将业务系统进一步拆分的架构风格          ...

  8. BCZM : 1.5

    https://blog.csdn.net/zs634134578/article/details/18046317 有很多服务器存储数据,假设一个机器仅存储一个标号为ID的记录,假设机器总量在10亿 ...

  9. Android开发 retrofit入门讲解

    前言 retrofit基于okhttp封装的网络请求框架,网络请求的工作本质上是 OkHttp 完成,而 retrofit 仅负责网络请求接口的封装.如果你不了解OKhttp建议你还是先了解它在来学习 ...

  10. css----less预处理器

    ###less less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言, 增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ,也 ...