index.wxml

  1. <view class="swiperContainer">
  2. <swiper bindchange="swiperChange" autoplay="{{autoplay}}" duration="{{duration}}" style='height: 660rpx;'>
  3. <block wx:for="{{imgUrls}}" wx:key="*this">
  4. <swiper-item wx:key="*this">
  5. <image src="{{item}}" class="slide-image" class='img' />
  6. </swiper-item>
  7. </block>
  8. </swiper>
  9. <view class="dots">
  10. <block wx:for="{{imgUrls}}" wx:key="*">
  11. <view class="dot{{index == current ? ' active' : ''}}"></view>
  12. </block>
  13. </view>
  14. </view>

index.wxss

  1. .swiperContainer {
  2. position: relative;
  3. }
  4. .img {
  5. width: %;
  6. height: %
  7. }
  8. .imageCount {
  9. width:120rpx;
  10. height:50rpx;
  11. background-color: rgba(, , , 0.3);
  12. border-radius:40rpx;
  13. line-height:50rpx;
  14. color:#fff;
  15. text-align:center;
  16. font-size:26rpx;
  17. position:absolute;
  18. left:13px;
  19. bottom:20rpx;
  20. }
  21.  
  22. .dots{
  23. position: absolute;
  24. left: ;
  25. right: ;
  26. bottom: 100rpx;
  27. display: flex;
  28. justify-content: center;
  29. }
  30. .dots .dot{
  31. margin: 5rpx;
  32. width: 50rpx;
  33. height: 8rpx;
  34. background: #;
  35. border-radius: 8rpx;
  36. transition: all .6s;
  37. }
  38. .dots .dot.active{
  39. width: 50rpx;
  40. background: #;
  41. }

index.js

  1. // pages/goodsDetails/goodsDetails.js
  2. Page({
  3. data: {
  4. duration: "",
  5. imgUrls: [
  6. 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
  7. 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
  8. 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
  9. 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
  10. ],
  11. current: ,
  12. },
  13. swiperChange: function(e) {
  14. var that = this;
  15. if (e.detail.source == 'touch') {
  16. that.setData({
  17. current: e.detail.current,
  18.  
  19. })
  20. }
  21. },
  22. onLoad: function(options) {
  23.  
  24. },
  25. onShow: function() {
  26.  
  27. },
  28.  
  29. })

微信小程序 swiper轮播 自定义indicator-dots样式的更多相关文章

  1. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  2. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  3. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  4. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  5. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  6. 小程序 swiper 轮播图滚动图片 + 视频

    直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...

  7. 小程序图片轮播特效swiper(纯手打)

    前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...

  8. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  9. 微信小程序:其中wxml和wxss的样式说明

    微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...

随机推荐

  1. CentOS 7 本地安装kubernetes

    环境 : CentOS7 master    192.168.94.11 node1 192.168.94.22 node2 192.168.94.33 关闭防火墙.SElinux 安装包地址 : 链 ...

  2. 跨站访问如何保证session的正常使用

    1.最近公司开发了一个网站项目,一切顺利.由于网页没有兼容手机浏览器,后来添加了一个webapp端,独立于另一个站点,用于解决兼容手机浏览器的问题.其中webapp端的数据全部通过ajax进行请求另一 ...

  3. mysql数据库设计三范式

    为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...

  4. Log4j2 日志级别

    Log4j2日志级别 级别 在log4j2中, 共有8个级别,按照从低到高为:ALL < TRACE < DEBUG < INFO < WARN < ERROR < ...

  5. laravel blog edit

    模板复制create的模板 主要修改的地方 <form action="{{ url('admin/article/'.$article->id) }}" method ...

  6. arcgis for js symbol图标的变化

    需求是图标有hover效果 ,如下 思路 : 1.创建图片标记,并赋值: args.rendererArgs = new RenderArgs();     args.rendererArgs.typ ...

  7. liunx驱动----按键中断

    liunx 中断 先设置异常入口 异常向量 void __init trap_init(void) 构造了异常向量 vector_irq+offset       按下按键: cpu自动进入异常模式 ...

  8. 服务器被疑似挖矿程序植入,发现以及解决过程(建议所有使用sonatype/nexus3的用户清查一下)

    此次服务器被植入挖矿程序发现起来较为巧合,首先是上周三开始,我通过sonatype/nexus3搭建的仓库间歇性崩溃,但是每次重新start一下也能直接使用所以没有彻底清查,去docker logs里 ...

  9. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

  10. B/S架构图解