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. 551.学生出勤记录I

    /* * @lc app=leetcode.cn id=551 lang=java * * [551] 学生出勤记录 I * * https://leetcode-cn.com/problems/st ...

  2. jenkins+Gitlab+maven+tomcat实现自动集成、打包、部署

    一.前言 首先出于提高自己技术水平和琢磨能做点什么能提高工作效率,上线工作实在无聊.重复(手动编译.打包,传包,重启),于是就想到了jenkins,jenkins持续集成已经不是什么新鲜的话题,网上文 ...

  3. [BZ4923][Lydsy1706月赛]K小值查询

    K小值查询 题面 维护一个长度为n的正整数序列a_1,a_2,...,a_n,支持以下两种操作: 1 k,将序列a从小到大排序,输出a_k的值. 2 k,将所有严格大于k的数a_i减去k. Input ...

  4. 字符串Contains匹配失效

    参考博客:https://blog.csdn.net/lewky_liu/article/details/79353151 在编码过程中发现一个很神奇的事情,使用String.contains方法失效 ...

  5. Linux基础命令---sar显示系统活动信息

    sar sar指令用来收集.报告.保存系统的活动信息.sar命令将操作系统中选定的累积活动计数器的内容写入标准输出.会计系统根据参数“interval”.“count”中的值,写入以秒为单位的指定间隔 ...

  6. react 父子组件通信

    import React from 'react'; import B from './B'; class A extends React.Component{ state = { msg:'我来自于 ...

  7. flask框架----整合Flask中的目录结构

    一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...

  8. 安卓入门——————简单记账本的开发(用sqlite存储数据)(一)

    设计思想————首先要确定有几个页面.和每个页面的大致布局 由于是入门,我也是学习了不是很长的时间,所以项目比较low.... 第一个页面,也就是打开APP的首页面: 今天这个博客,先实现添加功能!: ...

  9. Powershell获取硬件信息

    1.获取系统的BIOS的信息: Get-WMIObject -Class Win32_BIOS 2.获取内存信息: Get-WMIObject -Class Win32_PhysicalMemory ...

  10. ElasticSearch(十一)Elasticsearch清空指定Index/Type数据

    POST /index_name/type_name/_delete_by_query?conflicts=proceed { "query": { "match_all ...