zoukankan      html  css  js  c++  java
  • 小程序 轮播(做小圆点轮播功能)

    轮播

    		<swiper class="swiper" :style="{height:750*194/375+'rpx !important'}" circular="true" :autoplay="autoplay" :interval="interval" :duration="duration" :current="tabTopSwpIndex"  @change="topSwpChg">
    			<swiper-item v-for="(item,index) in common.album" :key="index" :style="{height:750*194/375+'rpx !important'}">
    				<view style="height: 100%; 100%;">
    					<myimage mode="aspectFill" :src="item" class="swiper-image" height="100%" with="100%"></myimage>
    				</view>
    			</swiper-item>
    		</swiper>
    

    轮播小圆点

            <view class="indicator">
                      <view class="item"  v-for="(item,index) in common.album" :key="index" :style="{'background-color':index==tabTopSwpIndex?'white':'transparent'}"></view>
                 </view>

    css

    /* */
    	 .indicator{
    		 position: absolute;
    		  100%;
    		 top: -14px;
    		 display: flex;
    		 justify-content: center;
    	 }
    	 .indicator .item{
    		height: 5px;
    		 5px;
    		border: #FFFFFF 0.5px solid;
    		border-radius: 50%;
    		margin-right: 5px;
    

     

    //methods
    imgPreview(item:any){ uni.previewImage({ urls:[item] }) },
  • 相关阅读:
    Python基础实例001:数字组合问题
    Python集合
    标量、向量、矩阵、张量
    re模块函数之search
    Python常用字符串操作
    Python基础之元组
    Bai, IEEE 2019
    词嵌入
    RNN 训练时梯度爆炸和梯度消失的理解
    OCR 综述
  • 原文地址:https://www.cnblogs.com/lsongyang/p/13540844.html
Copyright © 2011-2022 走看看