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

微信小程序轮播图实现 含小圆点 图片下方显示标题实现结果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)
上一篇 2022年5月11日 下午12:20
下一篇 2022年5月11日 下午12:20


相关推荐

  • 10分钟搞定DeepSeek本地部署,打工人必备保姆级教程

    10分钟搞定DeepSeek本地部署,打工人必备保姆级教程

    2026年3月16日
    3
  • ajax parsererror报错,jQuery为ajax请求返回“ parsererror”[通俗易懂]

    ajax parsererror报错,jQuery为ajax请求返回“ parsererror”[通俗易懂]我一直在从jquery收到针对Ajax请求的“parsererror”,我尝试将POST更改为GET,以几种不同的方式(创建类等)返回数据,但我似乎无法弄清楚问题出在哪里。我的项目在MVC3中,我使用的是jQuery1.5,我有一个Dropdown,并且在onchange事件上,我触发了一个调用,以根据所选内容获取一些数据。下拉列表:(这会从Viewbag的列表中加载“Views”,并触发事…

    2022年6月29日
    23
  • oracle dba书籍推荐_推荐给大学生必读的书

    oracle dba书籍推荐_推荐给大学生必读的书推荐给DBA的Oracle书籍

    2026年4月14日
    5
  • 【BZOJ】3052: [wc2013]糖果公园 树分块+带修改莫队算法

    【BZOJ】3052: [wc2013]糖果公园 树分块+带修改莫队算法

    2022年3月13日
    38
  • plc编程小技巧_plc编程入门培训

    plc编程小技巧_plc编程入门培训PLC是一种在工业中被广泛应用的自动控制元件。然而PLC应用与编程人才短缺已经成为制约我国自动控制领域发展的瓶颈。通过学习PLC可编程控制器程序设计使学员掌握可编程序控制器的工作原理和PLC控制系统硬件软件的设计方法,可编写复杂的PLC程序,为从事PLC控制系统的设计、调试和改造工作打下基础。可以独立承担相关项目的设计与开发。让您由一位电工升级为货真价实的工程师![1]随着现代工业设备自动化,越来越多的工厂设备将采用PLC人机界面等自动化器件来控制,因此设备自动化程度越来越高。对设备的维护人员的技术要求越

    2025年10月4日
    3
  • osgb转3dtiles之数据篇

    osgb转3dtiles之数据篇前不久 终于对 osgb 以及 3dtiles 的数据结构有了足够的了解 成功地利用 FME 将 osgb 数据转换成了 3dtiles 数据 于是 我开心地决定先来写一下如何将 osgb 转换成 3dtiles 数据 为了让大家能够比较详细的了解这两个数据格式 该系列文章一共分为上下两篇 我将会从 osgb 与 3dtiles 的数据结构以及层级构建两个方面对其进行介绍 下篇仍在酝酿中 所以我们可以先将此篇作为单篇来看 本篇文章 仅讲解 osgb 与 3dtiles 的数据结构 不会涉及到层级等等的介绍 但为了能够成功的看到我们最终转换出来

    2026年2月18日
    3

发表回复

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

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