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

微信小程序轮播图实现 含小圆点 图片下方显示标题实现结果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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143480.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 程序员工资统计_中国程序员工资

    程序员工资统计_中国程序员工资此调查,是对北京、上海、广东和浙江等全国29个省、直辖市及特别行政区的26W+优秀程序员进行了一次详细的调查,形成本报告。根据中国互联网络信息中心(CNNIC)近日发布第43次《中国互联网络发展状况统计报告》。截至2018年12月,中国网民规模为8.29亿,全年新增网民5653万。网上外卖用户规模达4.06亿,同比增长18.2%;网络视频用户规模达6.1…

    2022年10月11日
  • laravel微信自定义分享

    laravel微信自定义分享

    2021年10月28日
  • java中json转map

    java中json转mapjson转map转载自https://stackoverflow.com/questions/443499/convert-json-to-mapTypemapType=newTypeToken<Map<String,Map>>(){}.getType();Map<String,String[]>son=newGson().fromJson(easyString,mapType);

  • 网络安全之IP伪造

    网络安全之IP伪造

  • Java.Utils:网络工具包[通俗易懂]

    Java.Utils:网络工具包[通俗易懂]packagecom.boob.common.utils;importorg.springframework.util.MultiValueMap;importorg.springframework.web.util.UriComponentsBuilder;importjavax.net.ssl.HttpsURLConnection;importjavax.servlet….

  • 了解图形数据库_图形数据库neo4j

    了解图形数据库_图形数据库neo4j企业架构师应该知道什么您在Google上获得的图表数据库的描述主要是学术性的。我看到很多关于图形数据库的描述,它们讨论了Königsberg的七座桥梁或互联网的发明者Berners-Lee。有理论和愿景很好,但对我来说,我仍然认为引导相关性很重要。为什么图形数据库对您很重要?想象一下存储在当地连锁餐厅的数据。如果您要跟踪,则将客户信息存储在一个数据库表中,将您提供的项目存储在另一个数据…

    2022年10月29日

发表回复

您的电子邮箱地址不会被公开。

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