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

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


相关推荐

  • Android 基于TCP的 Socket 编程实现(结合 okio)

    Android 基于TCP的 Socket 编程实现(结合 okio)两个进程如果要进行通讯最基本的一个前提就是能够唯一的标识一个进程,在本地进程通讯中我们可以使用PID来唯一标识一个进程,但PID只在本地是唯一的,网络中两个进程PID冲突几率很大,这时我们就需要通过其他手段来唯一标识网络中的进程了,我们知道IP层的ip地址可以唯一标示主机,而TCP层协议和端口号结合就可以唯一标示主机的一个进程了。

    2022年6月7日
    40
  • 在pycharm中配置anaconda环境_anaconda pycharm环境配置

    在pycharm中配置anaconda环境_anaconda pycharm环境配置在pycharm中如果出现了nopythoninterpreterconfiguredfortheproject表示你没有给这个工程提供一个解释器如果已经安装pychrm在后期怎么配置解释器呢:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713171532445.png)file中选择setting然后点击右边的设置,Add进行配置,还是进入systeminterpreter,需要注意的是在Pycharm中选择错了anaconda.

    2022年8月28日
    5
  • 收藏一下,虽然很多东西还没接触到

    操作系统和类型(2007-8-15 22:17)1、操作系统概念是计算机系统的一种系统软件,由它统一管理计算机系统的资源和控制程序的执行。2、分类(1)批处理操作系统 

    2021年12月27日
    45
  • dex文件打开

    dex文件打开我们知道,要读取一个类代码,或读取类里的方法代码,都需要打开Dex文件,然后按前面介绍的格式去分析,并且读取出相应的内容,才可以给虚拟机进行解释执行。现在,我们就来学习和分析Dex文件的读取相关的代码。如下:/**Openthespecifiedfileread-only.Wememory-maptheentirethingand*parsethecontents

    2022年6月27日
    127
  • 第七课 实战文件注册机制「建议收藏」

    第七课 实战文件注册机制「建议收藏」                实战文件注册机制【盲人摸象】故名思意就是借助一些我们常用的按钮事件,API断点,去高速有效的锁定此课主要是以回顾和巩固以上六课我们所学的知识,当然这课我奉劝大家还是认真的学习,尤其是以后想靠外挂赚钱的同学,这课学得多自然就会得多不要认为我就是一味的靠我的经验,以下就是一系列调试的技巧 这课主要是观看MOV的赋值,以及寄存器的变化,从而达到激活成功教程这也是以后在激活成功教程带有V…

    2022年7月26日
    1
  • 来谈谈Spring构造函数注入的循环依赖问题

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:服务端开发 blog.csdn.net/u010013573/article/details/90573901…

    2021年6月25日
    83

发表回复

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

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