下部を指す小さなプログラム swiper のデモを実装すると、各画像に対応するテキストの説明があります。
レンダリング:
注: コードは mpvue フレームワークで記述されており、元のものとは異なりますが、原理は同じであり、アプレットによって提供されるイベントです。ネイティブとは、設定値がバインディングの動的スタイルとは異なることを意味します。
ネイティブ利用時の注意事項
当初はcssでスタイルを制御しようと思っていたのですが、swiperの向こう側の要素の中身が隠れてしまうことに気付き、やってみたらちょっと面倒に感じました。イベントが提供されたので、このイベントを使用して、インジケーター ポイントを直接定義できました。こちらの方がダイレクトな気がするので、この方法を採用しました。
アッパーコード
<template>
<div>
<swiper
autoplay="true"
circular="true"
@change="swiperChange"
>
<template v-for="(item, i) in swiperData">
<swiper-item>
<img
@change="imgChange"
:src="item.img"
class="indexItem"
mode="aspectFill"
/>
<p class="swiper-itemText">{
{item.text}}</p>
</swiper-item>
</template>
</swiper>
<!-- 自定义指示点dot -->
<div class="customDots">
<template v-for="(item, index) in swiperData">
<div class="customDots-item" :class="{ active: swiperCurrent == index }"></div>
</template>
</div>
</div>
</template>
js
<script>
export default {
data() {
return {
swiperData: [ {
img: "https://cdn.pixabay.com/photo/2020/03/18/05/29/swimming-pool-4942724__340.jpg",
text: '嘟嘟第一张'
},
{
img: "https://cdn.pixabay.com/photo/2020/04/02/11/20/fungus-4994622__340.jpg",
text: '啦啦第二张啦啦第二张啦啦第二张啦啦第二张啦啦第二张'
},
{
img: "https://cdn.pixabay.com/photo/2017/12/29/10/23/nature-3047194__340.jpg",
text: '嘿嘿第三张'
}
],
swiperCurrent: 0,
};
},
methods: {
//自动滑动时，获取当前的轮播对象 原生的这里设置值不一样
swiperChange(e) {
this.swiperCurrent = e.mp.detail.current
},
//图片手动滑动时，获取当前的轮播对象
imgChange(e) {
this.swiperCurrent = e.mp.detail.current
}
},
};
</script>
CSS
<style scoped>
swiper {
width: 100%;
height: 388rpx;
}
swiper-item {
border-radius: 14rpx;
overflow: hidden;
position: relative;
width: 100%;
height: 388rpx;
}
.indexItem {
width: 100%;
height: 388rpx;
}
.swiper-itemText {
position: absolute;
left: 34rpx;
bottom: 24rpx;
font-size: 32rpx;
width: 80%;
color: red;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.customDots {
margin-top: 20rpx;
display: flex;
justify-content: center;
}
/* 不是当前状态的点 */
.customDots .customDots-item {
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background-color: transparent;
border-radius: 8rpx;
background:red;
transition: all 0.6s ease-in-out;
}
/* 当前显示点 */
.customDots .customDots-item.active {
width: 30rpx;
background: red;
}
</style>
それを終えた後、私は別の考え方があることを発見しました.imgの高さを小さくし、swiper-itemの高さを高くすると、元のインジケータポイントが自動的に熱くなり、この効果。しかし、後で試したことはありません。興味があれば試してみてください。できればメッセージを残してください。こちらの方が簡単だと思います。恥ずかしいので、そんなに書く必要はありません。
個人的なレベルは限られています. ご不明な点がございましたら, 指導のためにメッセージを残してください. それは学習と参考のためだけです.
学びに制限はありません！お互いに励まし合い、がんばりましょう！