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

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


相关推荐

  • 使用Nginx实现负载均衡以及负载均衡算法「建议收藏」

    使用Nginx实现负载均衡以及负载均衡算法「建议收藏」总结地非常详细的负载均衡算法讲解https://blog.csdn.net/gu_wen_jie/article/details/82149003

    2022年10月10日
    8
  • 菜鸟教程 python 正则表达式_python进阶路线

    菜鸟教程 python 正则表达式_python进阶路线正则表达式正则表达式(RegularExpression,在代码中常简写为regex、regexp、RE或re)是预先定义好的一个“规则字符率”,通过这个“规则字符串”可以匹配、查找和替换那些

    2022年7月30日
    10
  • python详细安装教程环境配置_Python配置环境

    python详细安装教程环境配置_Python配置环境一、准备相应的材料本教程需要的文件如下表所示:文件名简介作用Anaconda3-2021.05-Windows-x86_64.exeAnaconda的安装包配置管理python环境Miniconda3-py39_4.9.2-Windows-x86_64.exe精简版的Anaconda的安装包(电脑配置较差时使用)配置管理python环境pycharm-community-2021.1.3.exePyCharm安装包Python代码的编辑器以上文件可在链

    2022年8月29日
    3
  • 存储卡的使用方法大全

    存储卡的使用方法大全存储卡的使用方法大全现在购买诺基亚手机,尤其是其智能手机的朋友是越来越多了,与其他品牌的机型相比,诺基亚的手机有一个最大的优点,就是支持储存卡内存扩充的机型比较多,这让大家在使用中不必再担心手机容量的问题,这也体现了诺基亚“科技以人为本”的宣传口号。今天,就为大家讲一讲适用于诺基

    2022年7月11日
    53
  • 图 欧拉回路

    图 欧拉回路欧拉道路 即一笔画 从图的一个结点出发走出一条道路 每条边恰好经过一次欧拉回路 从任意点出发 最终回到该点的欧拉道路 1 前提 忽略边的方向后 图是连通的 dfs bfs 并查集 2 条件 有向图 最多只有两个点的入度不等于出度 且相差的绝对值是 1 无向图 最多只有两个点的度是奇数 3 若有特殊点 则特殊的点为起点 若无任意点都可为起点寻找路径方法 DFS 构造一般的版本 void

    2025年6月13日
    3
  • AssemblyInfo.cs文件参数具体讲解「建议收藏」

    AssemblyInfo.cs文件参数具体讲解「建议收藏」AssemblyInfo.cs文件参数具体讲解原文地址:https://www.cnblogs.com/scy251147/archive/2010/10/23/1859576.html

    2022年7月13日
    24

发表回复

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

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