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

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


相关推荐

  • 阿里云ubuntu镜像下载_ubuntu最小镜像

    阿里云ubuntu镜像下载_ubuntu最小镜像备份原来的源$mv/etc/apt/sources.list/etc/apt/sources.list.bak$vim/etc/apt/sources.list添加如下内容debhttp://mirrors.aliyun.com/ubuntu/hirsutemainrestricteduniversemultiversedebhttp://mirrors.aliyun.com/ubuntu/hirsute-securitymainrestricteduniver

    2022年10月14日
    4
  • matlab直方图绘制[通俗易懂]

    matlab直方图绘制[通俗易懂]x=[55,63,69,70,75,78,82,84,85,88,90,96,100];y=[1,2,1,6,4,7,2,1,3,2,4,2,1];bar(x,y)>>a=[54.5,64.5,74.5,84.5,94.5];>>b=[1,3,17,8,7];>>bar(a,b)barh():可以显示一个水平的条形图barh(a,b)bar3或bar3h:显示三维bar3(a,b)…

    2022年10月18日
    2
  • 面试:精通Java;面试官:来讲一下JVM虚拟机内存模型的最底层原理,必须说详细说清楚,知其所以然。看完后,你还敢在简历上写精通Java吗?

    面试:精通Java;面试官:来讲一下JVM虚拟机内存模型的最底层原理,必须说详细说清楚,知其所以然。看完后,你还敢在简历上写精通Java吗?面试简历:精通Java和JVM面试官:来说说JVM虚拟机内存模型的最底层原理,必须说详细说清楚,达到知其所以然的目的。看完后你还敢在简历上写精通Java吗?

    2022年5月12日
    33
  • 手机APP如何抓包[通俗易懂]

    手机APP如何抓包[通俗易懂]使用场景程序及其使用第一步:Fiddler抓取手机App的HTTP协议请求数据首先保证手机和Fiddler主机为同一网络Fiddler开启远程设备连接(确认Fiddler代理主机IP和端口号)手机端设置网络代理为Fiddler主机(设为Fiddler代理主机IP地址和端口号)验证:访问传智官网(http://www.itcast.cn)第一步:Fiddler抓取手机App的…

    2022年5月30日
    36
  • 怎么使用 eclipse 开发和运行 Java 程序呢?

    怎么使用 eclipse 开发和运行 Java 程序呢?·使用eclipse开发第一个程序我们在上一节建好的Java项目中,开始开发Java程序。首先,新建一个Java类。在src目录上右键单击,建立一个Java类。如图1所示。图1新建Java类入口出现新建类的开始界面,如图2所示。我们只需输入类名即可,其他不需做任何设置:图2指定Java类的名称点击Finish后,新建Java类成功,出现如图3所示。图3新建Java类完成在src下面出现了Welcome.java文件。点击该文件

    2022年7月9日
    22
  • C语言 JSON数据格式解析

    C语言JSON数据格式解析一、如何用c语言编写与解析json数据格式,这篇主要是使用一个第三方的json库,本人已经上传至csdn,下载链接在下方。 二、json库代码文件下载地址(json.rar内部只有两个文件json.h与json.c) 1.http://download.csdn.net/download/jxyb2012/10234057

    2022年4月6日
    273

发表回复

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

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