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

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


相关推荐

  • Min Stack

    Min Stack

    2021年9月8日
  • 对c语言中static函数的理解「建议收藏」

    对c语言中static函数的理解「建议收藏」先看看前两篇博客:个人对头文件的理解、对声明和定义的理解。static函数只在定义该static函数的cpp中可见,在其他cpp中是不可见的。举个例子,我建立了一个project,该projec

    2022年7月4日
  • 微服务架构-实现技术之具体实现工具与框架5:Spring Cloud Feign与Ribbon原理与注意事项

    微服务架构-实现技术之具体实现工具与框架5:Spring Cloud Feign与Ribbon原理与注意事项目录一、SpringCloudFeign概述与工作原理解读(一)服务间调用的几种方式(二)Feign概述二、FeignClent注解剖析+SpringCloudFeign基本功能配置解读(一)@FeignClient注解剖析(二)SpringCloudFeign基本功能配置(三)Feign请求超时问题方法一方法二方法三三、SpringC…

    2022年4月29日
  • android gridlayout点击事件,Android GridLayout

    android gridlayout点击事件,Android GridLayout译者注:说实话我确实没用过GridLayout好好认识一下吧!android开发者每天都在问自己一个问题:我到底应该用哪个layout然而GridLayout在当前开发中的情况如下:大多数开发者并不知道这个布局一些开发者知道GridLayout但是因为某些原因没有使用只有少部分开发者花时间了解和积极使用这是我为什么要写这篇文章的原因,因为我觉得这个布局被不公平遗忘了为什么我们需要GridLa…

    2022年4月30日
  • Pycharm 实现远程部署和调试,原来这么简单「建议收藏」

    Pycharm 实现远程部署和调试,原来这么简单「建议收藏」一般代码本地调试完成后,需要运行到服务器上,比如自动化测试脚本、爬虫脚本等,所以第一步需要将项目上传到服务器,然后在服务器上进行调试和运行。但是需要长期维护和开发的项目,这样就繁琐了很多,并且我们时常要维护多个测试或者开发环境,每个环境的Python版本和依赖包有可能还存在差异,这样的话,每次更新需要花费的时间就更多了。其实,很多的编辑器都考虑到这个问题,可以实现远程调试,比如Pycharm、Vscode等。Pycharm可以进行远程部署项目(上传和下载),还可以通过配置远程解释器进行远程调..

    2022年8月28日
  • dnf钓鱼网站不小心点开了_dnf易语言源码

    dnf钓鱼网站不小心点开了_dnf易语言源码其实本人当时也没注意很多。就按下了“点此充值”注意!这个所谓的登录根本不是TX的登录,其实就是用一个表单将你的帐号和密码发给盗号的!当你打完帐号密码后按下那个“登录”按钮,你的帐号密码已经到了盗号的手里,不过,他们还差一步,才能将你的号彻底洗干净,那就是你的绑定手机和手机令牌、二级密码。好吧,草了个蛋,这是个.net的页面。继续,当你打完你的号码以后不按“登录”,好吧,我解释一下,因为盗号的人不需…

    2022年8月24日

发表回复

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

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