小程序自定义轮播图样式

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

效果展示:

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;
}

小程序自定义轮播图样式-遇见你与你分享

相关推荐
racerun8 小时前
小程序导航设置更多内容的实现方法
小程序
说私域8 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6688 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero13 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩21 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
CC同学呀1 天前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十2 天前
微信点餐小程序—美食物
微信·小程序
向明天乄2 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序