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

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


相关推荐

发表回复

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

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