小程序 轮播图

小程序 轮播图轮播图: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)
blank

相关推荐

  • Navicat Premium 中文版注册码

    Navicat Premium 中文版注册码NAVN-U6QE-6PX7-44K5NAVI-WVK6-ZYW4-LQYUNAVJ-5DOO-FCAA-PHMZ经测试,Nacicat版本是10.0.11(黄色版本)可以使用第一个注册码关注我的技术公众号,每天都有优质技术文章推送。微信扫一扫下方二维码即可关注:…

  • 8psk带宽计算_采用8PSK系统传输4800bps数据。 (1)信道带宽的最小理论值是多少? mpsk 信号可以采用差…

    8psk带宽计算_采用8PSK系统传输4800bps数据。 (1)信道带宽的最小理论值是多少? mpsk 信号可以采用差…码元速率为boud=4800/log8=1600Boud/s最小带宽为boud/2=1600/2=800HZ带宽不变,信息加倍,可以采用每个码元所含信息量为4bit的调制方式,如采用16QAM调制。带宽不变的情况下,信息速率增大,误码率相同的情况下,要增加信号的发送功率。给分吧,谢谢如同模拟调制,数字调制也可分为频率调制、相位调制和幅度调制,性能各有千秋。由于频率、相位调制对噪声抑制更好,因此成为…

    2022年10月10日
  • sql基本增删改查

    1增insertinto<表名>(列名)values(列值)例:insertintoStrdents(姓名,性别,出生日期)values(‘开心朋朋’,’男’,’1980/6/15′)2删2.1【删除<满足条件的>行】deletefrom<表名>[where<删除条件>]例:delet…

  • Uart接口TTL电平详解

    Uart接口TTL电平详解Uart接口的详细解释我面试的时候一般喜欢问应聘者一个问题:UART与RS232/RS485的区别与联系?很多人对于这个问题答得都不是很好。还有些人压根就没有想过这个问题,一直认为他们是同一个东西,就是咱们俗称的串口。我刚入嵌入式的大门时,对这个问题也困惑过很久,后来终于弄明白了。跟大家一起分享一下吧。简单来说,区别在于UART是一种接口,而RS232/RS485是一…

  • connectionstrings汇总

    connectionstrings汇总http://www.connectionstrings.com/所有的数据库连接语句

  • CANoe/CANalyzer诊断功能的深入理解以及CAPL诊断编程实现

    CANoe/CANalyzer诊断功能的深入理解以及CAPL诊断编程实现之前和大家分享了CANoe的基础使用(分析、仿真、测试、诊断),这篇文章将继续深入探讨如何使用CANoe/CANalyzer中的诊断功能。诊断用于在将ECU安装到系统之前或之后配置,维护,支持,控制和扩展ECU,例如,一辆车。诊断通常在请求-响应方案中执行:测试仪(客户端)向…

发表回复

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

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