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

微信小程序轮播图实现 含小圆点 图片下方显示标题实现结果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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 自监督学习 对比学习了解

    自监督学习 对比学习了解简介自监督学习是近几年(2020年)流行起来的一种机器学习方法,很多人认为自监督方法未来一段时间将取代现有的监督方法,成为深度学习中占据主导地位的方法。现在已经有不少采用自监督-对比学习的方法取得了领先的效果。目前(2020.10)来说这个领域貌似还比较新,没有找到很系统的讲解介绍资料。首先介绍一下到底什么是SSL,我们知道一般机器学习分为监督学习,非监督学习和强化学习。而self-supervisedlearning是无监督学习里面的一种。自监督学习的思想非常简单,就是输入的是一堆无监督的数据

    2022年9月14日
    2
  • 2021MySql-8.0.26安装详细教程(保姆级)

    2021MySql-8.0.26安装详细教程(保姆级)MySql-8.0.26安装详细教程保姆级下载安装包安装配置配置环境变量下载安装包下载安装包:下载网址:https://dev.mysql.com/downloads/选择这个进入后选择直接下载第一个点击这里,开始下载安装配置解压安装包我这里解压到d盘打开编写MySQL配置文件在解压目录下新建my.ini文件将下面文本拷贝进my,ini文件中[mysqld]#设置3306端口port=3306#设置mysql的安装目录———-是你的文件路径-

    2022年4月28日
    46
  • artcam浮雕实例教程_artcam2018入门教程

    artcam浮雕实例教程_artcam2018入门教程记录过去,奋斗现在,展望未来(给未来即将结束的工作的’存档’)ArtCAM入门简单教程二、浮雕前言:这不是个很专业的浮雕设计教程,不过是很简单即可实现的入门教程,而更深入的浮雕学习建议查找更全面的网上教程或CAM浮雕书籍。   常用的矢量雕刻,详见:http://blog.sina.com.cn/s/blog_647ef76d0101jgwn.html开始之

    2025年9月15日
    4
  • idea2021.11.3激活(JetBrains全家桶)

    (idea2021.11.3激活)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html08…

    2022年3月28日
    67
  • java bytebuffer flip_java string转byte

    java bytebuffer flip_java string转byteimportjava.nio.ByteBuffer;importjava.nio.ByteOrder;publicclassbytebuffertest{publicstaticvoidmain(String[]args){//CreateaByteBufferusingabytearraybyte[]bytes=newbyte[10];Byt

    2022年10月2日
    2
  • 沟通和认同:自我的塑造与展现

    沟通和认同:自我的塑造与展现一、沟通和自我1、自我概念:指对自己所持有的相对稳定的知觉2、自尊:对自我价值的评估3、反映评价:我们每个人得出的自我概念反映的是我们认为别人看待我们的方式4、社会比较:依据与他人对照的方式评估自身5、自我概念是被周遭环境塑造出来的,塑造的过程以两种方式呈现:反映评价和社会比较6、自我概念的特征:6.1、自我概念是主观的(有些人长期乃至永久地经受着过度的自我怀疑和批判之苦)(当我们经历负面情绪的时候要比我们心情好时对自己更挑剔)6.2、自我概念抗拒改变7、接受一个

    2022年6月25日
    30

发表回复

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

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