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

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


相关推荐

  • keil5如何生成bin文件_keil4生成bin文件

    keil5如何生成bin文件_keil4生成bin文件 在RealviewMDK的集成开发环境中,默认情况下可以生成*.axf格式的调试文件和*.hex格式的可执行文件。虽然这两个格式的文件非常有利于ULINK2仿真器的下载和调试,但是ADS的用户更习惯于使用*.bin格式的文件,甚至有些嵌入式软件开发者已经拥有了*.bin格式文件的调试或烧写工具。为了充分地利用现有的工具,同时发挥RealviewMDK集成开发环境的优势,将*.axf格式文件或*.he…

    2022年10月20日
    3
  • CAS单点登录的实现(二)「建议收藏」

    CAS单点登录的实现(二)「建议收藏」这篇文章对CAS单点登录具体实现的一些步骤就行讲述,至于CAS单点登录的实现原理分析,请参看下面这篇文章:CAS单点登录原理分析https://blog.csdn.net/qq_41258204/article/details/84036875CAS包含两个部分:CASServer和CASClient。CASServer:其实就是一个war包,CAS框架已经提供。只…

    2022年6月7日
    68
  • Windows下cmd命令无法切换盘符「建议收藏」

    Windows下cmd命令无法切换盘符「建议收藏」发现使用cmd的cd命令无法从c盘切换到d盘,在切换之前先打D:再正常使用cd命令就可以啦

    2022年10月3日
    2
  • lambda表达式python_Python中的Lambda表达式「建议收藏」

    lambda表达式python_Python中的Lambda表达式「建议收藏」Lambda表达式在python程序中是一种很常见的匿名方法的书写形式,它书写起来非常简单,但是牺牲了可读性。下面来看一下Lambda的简单介绍。语法lambda[parameter_list]:expressionLambda表达式的返回值是一个函数,[parameter_list]是函数的参数,expression是具体的操作。它对应的非匿名方法的书写方式为:deffunction([par…

    2022年10月17日
    8
  • vs2005注册_vs注册界面设计

    vs2005注册_vs注册界面设计注册码:KYTYH-TQKW6-VWPBQ-DKC8F-HWC4J找到SETUP文件夹下的setup.sdb,用记事本打开它,找到[ProductKey],将下面的一行序列号删除,改为正式Key,保存后再安装就是正式版了,记住,中间没有横线!!如果先前已经安装好180天的版本,请在添加删除VisualStudio2005时,可以输入序列号,进行升级。找到SETUP文件夹下的setup.

    2022年8月22日
    7
  • mysql的启动命令_mysql的配置和启动命令

    mysql的启动命令_mysql的配置和启动命令一.mysql配置文件在linux系统下的位置使用命令查询位置:1.找到安装位置whichmysql->/usr/bin/mysql2.接下来就可以针对这个目录通过一些命令查看配置文件在哪了,如下/usr/local/bin/mysql–verbose–help|grep-A1’Defaultoptions’得到以下结果:服务器首先读取的是/etc/mysql/m…

    2022年5月21日
    41

发表回复

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

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