小程序 轮播图

小程序 轮播图轮播图:cssswiper{height:400rpx;}swiper-itemimage{width:100%;height:100%;}.swiper-container{position:relative;margin-top:-300rpx;}.swiper-container.swiper{height:300r…

大家好,又见面了,我是你们的朋友全栈君。

轮播图

css

swiper {

height: 400rpx;

}

swiper-item image {

width: 100%;

height: 100%;

}

.swiper-container{

position: relative;

margin-top:-300rpx;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 90%;

height: 100%;

margin: 0 5%;

border-radius: 20rpx;

}

xml

 

<view class="swiper-container">

  <swiper indicator-dots="{
  
  {indicatorDots}}" autoplay="{
  
  {autoplay}}" indicator-color="{
  
  {indicatorCo}}" indicator-active-color="{
  
  {indicatoraAC}}" interval="{
  
  {interval}}" duration="{
  
  {duration}}" circular="{
  
  {duration}}" current="{
  
  {swiperCurrent}}" bindchange="swiperChange" class="swiper">

    <block wx:for="{
  
  {imgUrls}}" wx:key="unique">

      <swiper-item>

        <image src="{
  
  {item}}" class="img" bindtap="swipclick" mode="aspectFill"/>

      </swiper-item>

    </block>

  </swiper>
  

</view>

js

Page({

  data: {

    swiperCurrent: 0,

    indicatorDots: true,

    autoplay: true,

    interval: 3000,

    duration: 800,

    circular: true,

    indicatorCo:"#ffdfdc",

    indicatoraAC:"#ff948a",

    imgUrls: [

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg'

    ],

    links: [

      '../user/user',

      '../user/user',

      '../user/user'

    ]


  },

  //轮播图的切换事件

  swiperChange: function (e) {

    this.setData({

      swiperCurrent: e.detail.current

    })

  },

  //点击指示点切换

  chuangEvent: function (e) {

    this.setData({

      swiperCurrent: e.currentTarget.id

    })

  },

  //点击图片触发事件

  swipclick: function (e) {

    console.log(this.data.swiperCurrent);

    wx.switchTab({

      url: this.data.links[this.data.swiperCurrent]

    })

  }

})

 

效果图(不会录频啊  有小伙伴告诉我吗  哈哈哈哈)

 

小程序 轮播图

 

swiper小圆点 默认样式修改  (以下代码  上面都有  这里只是做个截屏说明一下)

xml

小程序 轮播图

                                                                                                图1

 

js

 

小程序 轮播图                                                                                                                             图2

 

API

小程序 轮播图

                                                                                               图3

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143139.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 排序二叉树的建立与中序遍历

    排序二叉树的建立与中序遍历树结构练习——排序二叉树的中序遍历TimeLimit:1000msMemorylimit:65536K有疑问?点这里^_^题目描述在树结构中,有一种特殊的二叉树叫做排序二叉树,直观的理解就是——(1).每个节点中包含有一个关键值(2).任意一个节点的左子树(如果存在的话)的关键值小于该节点的关键值(3).任意一个节点的右子树(如果存在的话)的关键值大于该节点的关键值。现

  • 毕业5年,我问遍了身边的大佬,总结了他们的学习方法

    毕业5年,我问遍了身边的大佬,总结了他们的学习方法我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。

  • 刷完 900 多道算法题的首次总结:LeetCode 应该怎么刷?「建议收藏」

    刷完 900 多道算法题的首次总结:LeetCode 应该怎么刷?「建议收藏」LeetCode算法题应该怎么刷?算法题学习路线?怎么组队刷题?有没有算法刷题群?你是怎么入门LeetCode的?刷完1000道算法题是什么体验?大家都是怎么刷题的?新手小白开始刷算法题应该怎么刷,注意什么?刷LeetCode总是觉得太难怎么办?刷算法题有没有书籍推荐?该按照什么顺序刷算法题?LeetCode怎么看别人的题解?有哪些好的算法题博主推荐?

  • pycharm连接mysql数据库代码_myeclipse连接数据库

    pycharm连接mysql数据库代码_myeclipse连接数据库PyCharm是一款常用的Python开发的软件,这里给大家介绍一下如何在PyCharm如何连接MySQL数据库。首先,我们需要找到页面中的DataBase窗口,一般在页面的右侧,没有显示的话,可以点击View->ToolWindows->DataBase。然后显示DataBase之后,我们点击DataBase。然后我们点击DataBase的这个+号。然后选择DataSource->MySQL。然后就显示到连接的页面,如果是第一次连接的时候,就需要点击下面的D

  • xml格式化 java_Java XML格式化程序

    xml格式化 java_Java XML格式化程序xml格式化javaeXtensiveMarkupLanguage(XML)isoneofthepopularmediumformessagingandcommunicationbetweendifferentapplications.SinceXMLisopensourceandprovidescontroloverdataformatv…

  • 线程池与mq的简单结合使用

    线程池与mq的简单结合使用线程池与mq的简单结合使用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号