直播平台软件开发，卡片式轮播图，可左右滑动

直播平台软件开发，卡片式轮播图，可左右滑动

wxml代码

 

1

<swiper bindchange="cardSwiper" indicator-dots="true" circular="true" indicator-color="#8799a3" indicator-active-color="#0081ff"><br>  <block wx:for="{{swiperList}}" wx:key="*this"><br>    <swiper-item class="{{cardCur==index?'cur':''}}"><br>      <view class="swiper-view"><br>        <image src="{{item.url}}"></image><br>      </view><br>    </swiper-item><br>  </block><br></swiper><br>

​

wxss样式代码

 

1

page {<br>  background: gainsboro;<br>}<br>swiper {<br>  height: 1000rpx !important;<br>  margin-top: 10rpx;<br>}<br>swiper-item {<br>  width: 610rpx !important;<br>  left: 40rpx;<br>  box-sizing: border-box;<br>  padding: 40rpx 0rpx 70rpx;<br>}<br>.swiper-view {<br>  width: 100%;<br>  display: block;<br>  height: 100%;<br>  transform: scale(0.9);<br>  transition: all 0.2s ease-in 0s;<br>  overflow: hidden;<br>  border-radius: 60rpx;<br>  background: whitesmoke;<br>  text-align: center;<br>}<br>swiper-item.cur .swiper-view {<br>  transform: none;<br>  transition: all 0.2s ease-in 0s;<br>}<br>.swiper-view image {<br>  display: block;<br>  width: 100%;<br>  height: 500rpx;<br>  margin: 0;<br>  border-radius: 10rpx;<br>  pointer-events: none;<br>}<br>.title {<br>  font-size: 47rpx;<br>  margin: 15rpx;<br>}<br>.desc {<br>  font-size: 35rpx;<br>  margin: 5rpx 15rpx;<br>}<br>.address {<br>  font-size: 30rpx;<br>  color: gray;<br>  margin-top: 20rpx;<br>}

 

js代码如下

 

1

Page({<br>    data: {<br>      cardCur: 0,<br>      swiperList: [{<br>        id: 0,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'<br>      }, {<br>        id: 1,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',<br>      }, {<br>        id: 2,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'<br>      }, {<br>        id: 3,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'<br>      }, {<br>        id: 4,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'<br>      }, {<br>        id: 5,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'<br>      }, {<br>        id: 6,<br>        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'<br>      }],<br>    },<br>    cardSwiper(e) {<br>      this.setData({<br>        cardCur: e.detail.current<br>      })<br>    }<br>  })

 

 以上就是 直播平台软件开发，卡片式轮播图，可左右滑动，更多内容欢迎关注之后的文章