微信小程序轮播图实现 含小圆点 图片下方显示标题

微信小程序轮播图实现 含小圆点 图片下方显示标题实现结果html代码<viewclass=”lb”><swiperindicator-dots=”true”autoplay=”true”interval=”3000″current=”0″circular=”true”style=”width:100%;”><swiper-item><imagesrc=”../image/im1.jpg

大家好,又见面了,我是你们的朋友全栈君。

html代码

<view class="lb" >
            <swiper indicator-dots="true" autoplay="true" interval="3000" current="0" circular="true" style="width:100%;" >
                <swiper-item>
                    <image src="../image/im1.jpg" alt="" bindtap="viewTap1" style="width:100%;height:100%" mode="widthFix"></image>
                    <text class="head_text" bindtap="viewTap" >标题1</text>
                </swiper-item>
                <swiper-item>
                    <image src="../image/im2.jpg" style="width:100%;height:100%" mode="widthFix" alt=""></image>
                    <text class="head_text">标题2</text>
                </swiper-item>
                <swiper-item>
                    <image src="../image/im3.jpg" style="width:100%;height:100%" mode="widthFix" alt=""></image>
                    <text class="head_text">标题3</text>
                </swiper-item>
            </swiper>
</view>

css代码

.lb{ 
   
  /* float: left; */
  width: 100%;
  height: 220px;
  padding: 0px;
  /* margin-top: 51px; */
  /* background-color: red; */
}
.lb swiper{ 
   
  margin: 0px;
  width: 100%;
  height: 100%;
  /* margin-top: 51px; */
  /* height: calc(100vw * 187 / 360); */
}

.swiper image{ 
   
  width: 100%;
  height: 100%;
  text-align: center;
  /* margin-right: 18px; */
  /* display: block; */
}
.head_text{ 
   
  position: relative;
  width: 100%;
  text-align: center;
  left: 10%;
  bottom: 22%;
  color: white;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143480.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 跳跃性思维的一些特征【转】

    跳跃性思维的一些特征【转】好吧!我勇敢地承认我是跳跃性思维。跳跃性思维又称选单式思考,经常讲话前言后语不搭,跳跃性很强;一边和别人在聊天,同时想到完全不搭的另外事;旁人聊天时却很迷惑,浑然不知我在表达什么。当你谈话后意识到我时

    2022年8月4日
    3
  • POJ 3009-Curling 2.0(DFS)

    POJ 3009-Curling 2.0(DFS)

    2022年1月11日
    31
  • java 无锁编程_使用CAS、FAA实现无锁编程

    java 无锁编程_使用CAS、FAA实现无锁编程锁会导致性能降低,在特定情况可用硬件同步原语替代锁,保证和锁一样数据安全,同时提供更好性能。硬件同步原语(AtomicHardwarePrimitives)由计算机硬件提供的一组原子操作,较常用的原语主要是CAS和FAA两种。CAS(CompareandSwap)比较交换FAA原语(FetchandAdd)语义是,先获取变量p当前的值value,然后给变量p增加inc,最后返回变量p之…

    2022年6月3日
    50
  • 5500xt挖矿算力_rx470d etc算力「建议收藏」

    5500xt挖矿算力_rx470d etc算力「建议收藏」…每日平均收益为R$4。RX5700XT表现出色的其他加密货币包括:以太坊经典(ETC),拉文币(RVN),天堂协议XHV和Beam(BEAM)。可以用于采矿的同一系列图形卡中的其他型号是RX5700,RX5600XT和RX5500XT。但是,与RX5700XT相比,这些其他型号的利润率较低。NvidiaRTX2060超级频率:1470MHz至1670MHzV…

    2022年6月14日
    141
  • WDA报错

    WDA报错WDA报错记录RuntimeErrors    UNCAUGHT_EXCEPTIONException       CX_FQDN”CX_FQDN=======================CP””UNCAUGHT_EXCEPTION”报错的代码如下:应该是网址配置不对导致的,由于是个人练习使用的虚拟机,直接注释这段代码。 

    2022年7月12日
    19
  • 矩阵的行列式、秩的意义

    矩阵的行列式、秩的意义线性代数真是一个很抽象的东西,即使我们很多人都学过,但是我相信绝大部分的都不知道这是干嘛用的,找了不少资料,终于发现了这么一篇好文章,于是强烈希望可以和大家分享,帮助大伙进一步理解矩阵的行列式和秩的本质意义。1关于面积:    一种映射 大家会说,面积,不就是长乘以宽么,其实不然。我们首先明确,这里所讨论的面积,是欧几里得空间几何面积的基本单位:平行四边形的面积。平行四边形面积

    2022年5月8日
    49

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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