小程序实现轮播图

 更新时间:2022年06月24日 11:17:56   作者:苏三金  
这篇文章主要为大家详细介绍了小程序实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现轮播图的具体代码,供大家参考,具体内容如下

那个先上效果:

step1:页面index.wxml代码

<!-- 轮播 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
    <block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
        <swiper-item>
            <image src='{{item.image}}' class='u-img-slide' ></image>
        </swiper-item>
    </block>
</swiper>

step2:配置信息也就是index.js

Page({
  data: {
    bnrUrl: [],
  },
  onLoad: function () {
    // 轮播 
    wx.request({
      url: 'https://locally.uieee.com/slides',
      success (res) {
    // console.log(res.data)
      this.setData({
        icons:res.data
      })
   })
})  

step3:样式文件 index.wxss

/* 轮播 */
.u-wrp-bnr {
  width: 100%;
  height: 300rpx;
  display: block;
  position: relative;
  /* top: rpx; */
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit; 
  /* 继承夫类的高 */
}

然后就是wx.require({})中传递一个对象,这个对象的属性分别对应不同的含义

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

下面解释一下:

url:请求地址,必填
data:请求的参数
method:HTTP 请求方法,默认为get
dataType:返回的数据格式,默认为json
success:接口调用成功的回调函数
fail:接口调用失败的回调函数
complete:接口调用结束的回调函数(调用成功、失败都会执行)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序使用picker组件出现的问题探究

    微信小程序使用picker组件出现的问题探究

    这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例,这里的搜索框使用的是vant微信小程序组件库,picker使用的微信小程序的原生组件,需要的朋友可以参考下
    2023-01-01
  • Echarts中legend属性使用的方法详解

    Echarts中legend属性使用的方法详解

    Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,下面这篇文章主要给大家介绍了关于Echarts中legend属性使用的相关资料,需要的朋友可以参考下
    2022-04-04
  • 详解JavaScript的BUG和错误

    详解JavaScript的BUG和错误

    本篇内容给大家总结了JavaScript的BUG和错误,如果大家对此知识点有兴趣,可以跟着学习参考下。
    2018-05-05
  • TypeScript 引用资源文件后提示找不到的异常处理技巧

    TypeScript 引用资源文件后提示找不到的异常处理技巧

    这篇文章主要介绍了TypeScript 引用资源文件后提示找不到的异常处理,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序实现Canvas画板源代码

    微信小程序实现Canvas画板源代码

    微信小程序中的画布是非常重要的展示控件,其相当于HTML中的canvas控件,下面这篇文章主要给大家介绍了关于微信小程序实现Canvas画板的相关资料,需要的朋友可以参考下
    2024-08-08
  • 解析从小程序开发者工具源码看原理实现

    解析从小程序开发者工具源码看原理实现

    小程序的架构设计与web技术还是有一定的差别,其吸取了web技术的一些优势,同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点
    2021-06-06
  • JavaScript接口防止重复请求的方法总结

    JavaScript接口防止重复请求的方法总结

    在前端开发中,防止重复请求是一个常见的问题,重复请求不仅会增加服务器的负载,还可能导致数据不一致等问题,本文为大家整理了一些常用的解决方法,需要的可以参考下
    2024-12-12
  • JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器

    JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器

    这篇文章主要介绍了使用JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • PassWord输入框代码分享

    PassWord输入框代码分享

    这篇文章主要介绍了PassWord输入框的代码,代码简单易懂,非常实用,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 多种方法判断Javascript对象是否存在

    多种方法判断Javascript对象是否存在

    我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明,Juriy Zaytsev指出判断一个Javascript对象是否存在,有超过50种写法,下面为大家介绍几种比较常用的,感兴趣的朋友可以参考下
    2013-09-09

最新评论