微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3）(1)

那么我们可以把图片放在服务器上，发送请求来获取。

index.wxml：

这里使用小程序提供的组件

autoplay：自动播放

interval：自动切换时间

duration：滑动动画的时长

current：当前所在的页面

bindchange：current 改变时会触发 change 事件

由于组件提供的指示点样式比较单一，另外再自定义指示点的样式

{{index+1}}

index.wxss：

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

right: 40rpx;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 10rpx;

width: 28rpx;

height: 28rpx;

background: #fff;

border-radius: 50%;

transition: all .6s;

font: 300 18rpx/28rpx “microsoft yahei”;

text-align: center;

}

.swiper-container .dots .dot.active{

background: #f80;

color:#fff;

}

index.js：

//导入js

var util = require(‘…/…/utils/util.js’)

Page({

data: {

slider: [],

swiperCurrent: 0

},

onLoad: function () {

var that = this;

//网络访问，获取轮播图的图片

util.getRecommend(function(data){

that.setData({

slider: data.data.slider

})

});

},

//轮播图的切换事件

swiperChange: function(e){

//只要把切换后当前的index传给组件的current属性即可

this.setData({

swiperCurrent: e.detail.current

})

},

//点击指示点切换

chuangEvent: function(e){

this.setData({

swiperCurrent: e.currentTarget.id

})

}

})

utils.js：

//网络访问

function getRecommend(callback) {

《设计思想解读开源框架》

第一章、 热修复设计

• 第一节、 AOT/JIT & dexopt 与 dex2oat

• 第二节、 热修复设计之 CLASS_ISPREVERIFIED 问题

• 第三节、热修复设计之热修复原理

• 第四节、Tinker 的集成与使用（自动补丁包生成）

  

  第二章、 插件化框架设计

• 第一节、 Class 文件与 Dex 文件的结构解读

• 第二节、 Android 资源加载机制详解

• 第三节、 四大组件调用原理

• 第四节、 so 文件加载机制

• 第五节、 Android 系统服务实现原理

  

  第三章、 组件化框架设计

• 第一节、阿里巴巴开源路由框——ARouter 原理分析

• 第二节、APT 编译时期自动生成代码&动态类加载

• 第三节、 Java SPI 机制

• 第四节、 AOP&IOC

• 第五节、 手写组件化架构

  

  第四章、图片加载框架

• 第一节、图片加载框架选型

• 第二节、Glide 原理分析

• 第三节、手写图片加载框架实战

  

  第五章、网络访问框架设计

• 第一节、网络通信必备基础

• 第二节、OkHttp 源码解读

• 第三节、Retrofit 源码解析

  

  第六章、 RXJava 响应式编程框架设计

• 第一节、链式调用

• 第二节、 扩展的观察者模式

• 第三节、事件变换设计

• 第四节、Scheduler 线程控制

  

  第七章、 IOC 架构设计

• 第一节、 依赖注入与控制反转

• 第二节、ButterKnife 原理上篇、中篇、下篇

• 第三节、Dagger 架构设计核心解密

  

  第八章、 Android 架构组件 Jetpack

• 第一节、 LiveData 原理

• 第二节、 Navigation 如何解决 tabLayout 问题

• 第三节、 ViewModel 如何感知 View 生命周期及内核原理

• 第四节、 Room 架构方式方法

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
  式方法**

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  [外链图片转存中…(img-uBbiog1f-1715265702848)]
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  [外链图片转存中…(img-G3tNTXVW-1715265702849)]
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！