小程序自定义轮播图样式

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

效果展示:

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

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

相关推荐
毕设源码-赖学姐3 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud3 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞12 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞19 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗19 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张1 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师1 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪1 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版