@amdiqqq
import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
// import { connect } from '@tarojs/redux'
import { AtSegmentedControl } from 'taro-ui'
import './dbanner.scss'
class Banner extends Component {
state = {
current : 0,
list: [{
"backgroundColor": "2a2217",
"img": "https://yanxuan.nosdn.127.net/ec57acdb11e9c65d361267195f2b2de8.jpg",
"rank": 1,
"type": 3,
"content": "/pages/webview/index?url=https%3A%2F%2Fyou.163.com%2Ftopic%2Fv1%2Fpub%2FKAmXjEWWmhTl.html"
}, {
"backgroundColor": "002a42",
"img": "https://yanxuan.nosdn.127.net/1bcda063c3de758c49f9b3129d75c58e.jpg",
"rank": 2,
"type": 3,
"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F2y1GHJEwSE7M.html"
}, {
"backgroundColor": "a32425",
"img": "https://yanxuan.nosdn.127.net/af3c24e60b04bf506544dd98fd3cb453.jpg",
"rank": 3,
"type": 3,
"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F80UiMHb8W7Ub.html"
}, {
"backgroundColor": "c74750",
"img": "https://yanxuan.nosdn.127.net/cea3a93f42cddf55e8511caaf4eba799.jpg",
"rank": 4,
"type": 3,
"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2FDisKHkXqufXpABy.html"
}]
}
config = {
navigationBarTitleText: '详情'
}
handleClick = (value) => {
console.log('v:', value)
this.setState({
current: value
})
}
// 更新当前帧
onChange = (e) => {
this.setState({
current: e.detail.current
})
console.log(e)
}
render () {
const { current } = this.state;
return (
<View className='home-banner'>
<Swiper
className='home-banner__swiper'
current={current}
onChange = {this.onChange}
>
{this.state.list.map(item => (
<SwiperItem
key={item.rank}
className='home-banner__swiper-item'
>
<Image
className='home-banner__swiper-item-img'
src={item.img}
/>
</SwiperItem>
))}
</Swiper>
<View className='swiper-label'>
{current}/{this.state.list.length}
</View>
<Button onClick={this.handleClick.bind(this, 2)}>设置为第 3 帧</Button>
</View>
)
}
}
export default Banner
