zoukankan      html  css  js  c++  java
  • 小程序轮播的小点的样式变化

    
    
         <!-- 轮播图区域   -->
        <view class="coursel">
            <swiper class='indexSwiper' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" circular='true'>
              <block wx:for="{{imgUrls}}" wx:key=''>
                <swiper-item>
                  <image src="{{item}}" class="slide-image"  />
                </swiper-item>
              </block>
           </swiper>
          <view class="dots"> 
            <block wx:for="{{imgUrls}}" wx:key="unique"> 
              <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> 
            </block> 
          </view>
        </view>
        <!-- 轮播图区域   -->

    css样式

    .indexSwiper{
      width: 100%;
      height:470rpx;
    }
     
    .coursel{
      position: relative;
      width: 100%;
      height:470rpx;
    }
    .dots{ 
      position: absolute; 
      left: 0; 
      right: 0; 
      bottom: 20rpx; 
      display: flex; 
      justify-content: center; 
    } 
    .dots .dot{ 
      margin: 0 8rpx; 
      width:15rpx;
      height:6rpx;
      background:rgba(255,255,255,1);
      opacity:0.5;
      border-radius:1rpx;
      transition: all .6s; 
    } 
    .dots .dot.active{ 
      width:24rpx;
      height:6rpx;
      background:rgba(255,255,255,1);
      border-radius:1rpx;
    }
     
    swiper image {
      width: 100%;
    }
        imgUrls: [
          '../../images/banner.jpg',
          '../../images/banner.jpg',
          '../../images/banner.jpg'
        ],
        indicatorDots: false,
        autoplay: true,
        interval: 4000,
        duration: 800,
    
      swiperChange(e) {
        const that = this;
        that.setData({
          swiperIndex: e.detail.current,
        })
      },

    其实就自己编码一个轮播小点,然后根据轮播图的下标来修改小点的变化...........................................................

  • 相关阅读:
    公司系统缓慢-分析数据库CPU过高原因-连接数
    克隆虚拟机的相关设置
    centos7基本设置和优化
    遇到的问题和解决集中
    chrome优化调教
    shell三剑客之小弟grep
    迭代器和生成器
    函数进阶
    函数介绍&参数的使用
    文件处理中光标的移动以及文件的修改
  • 原文地址:https://www.cnblogs.com/liujun1128/p/10730219.html
Copyright © 2011-2022 走看看