小程序自定义轮播图样式

2020-04-05   阅读:689   分类:后端    标签: 微信小程序

小程序自定义轮播图样式以下是各案例,仅供大家参考。


效果展示:

3.gif

index.wxml代码:

<view>
 <!-- 轮播 -->
  <view>
    <swiper indicator-dots="{{indicatorDots}}"
          autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="swiperChange">
      <block wx:for="{{banner}}">
        <swiper-item>
          <view>
          <image src="{{item.ad_img}}" mode="scaleToFill"></image>
          <view>
          <view>{{item.ad_name}}</view>
          </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <view>
      <block wx:for="{{banner}}" wx:key="unique">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>
   <!-- 轮播 -->
</view>

index.js代码:

const app = getApp()
 
Page({
  data: {
    now:'',
    banner: [],
    circular: true,
    indicatorDots: false,
    autoplay: true,
    interval: 4000,
    duration: 800,
    swiperCurrent: 0,
  },
  swiperChange(e) {
    let current = e.detail.current;
    // console.log(current, '轮播图')
    let that = this;
    that.setData({
      swiperCurrent: current,
    })
  },
  //事件处理函数
  bindViewTap: function() {
 
  },
  onLoad: function () {
  this.getBanner(); //获取轮播图
  },
    // 轮播
  getBanner:function(){
    var that=this
    wx.request({
      url: app.AppUrl +'/getBanner',
      success(res) {
        that.setData({
          banner: res.data.res_banner,
        })
      }
    })
  },
})

index.wxss代码:

.lunbo{ width: 96%; margin-left: 2%;  height: 350rpx; background: #000; float: left; border-radius: 15rpx; overflow: hidden;position: relative;}
.lunbo swiper{width: 100%; height: 350rpx; }
.lunbo image{ width: 100%; height: 350rpx; display: block; border-radius: 15rpx;}
.lunbo .name{background: linear-gradient(transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.4));
width: 750rpx;
position: absolute;
bottom: -2rpx;
left: 0px;}
.lunbo .name view{
width: 500rpx;
color: #fff;
padding-left: 20rpx;
padding-bottom: 10rpx;
padding-top: 10rpx;
font-size: 30rpx;
 overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.dots{
  position: absolute;
  right: 0;
  bottom: 20rpx;
  display: flex;
}
.dots .dot{
  margin: 0 8rpx;
  width: 8rpx;
  height: 8rpx;
  background:rgba(255,255,255,0.5);
  border-radius: 8rpx;
  transition: all .6s;
}
.dots .dot.active{
  width: 24rpx;
  background: #fff;
}


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/303.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×