小程序轮播指示点手动实现

灰太狼 2022-05-15 10:29 287阅读 0赞

由于原生的点限制太多，这里展示下，手动自己实现指示点  
html

<swiper class='banner-top' indicator-dots="{ { false}}" autoplay="{ { true}}" interval="{ {4500}}" duration="{ {666}}" circular="{ { true}}" indicator-color="#D8D8D8" indicator-active-color="#FF5C5C" bindchange="bannerChange"> <block wx:for="{ { bannerList}}" wx:key="{ { index}}"> <swiper-item class="swiper-item"> <image src="{ { item.image}}" class="slide-image" data-goods="{ { item.id}}" bindtap="toDetail" /> <view class='banner-title'>{ { item.name}}</view> </swiper-item> </block> </swiper> <view class='banner-dot'> <view class='item-dot { { index == swiperCurrent ? "active-dot": ""}}' wx:for="{ { bannerList}}" wx:key="{ { index}}"></view> </view>

css

swiper-item { position: relative; padding: 20rpx 20rpx 0; width: 100vw; }
    .banner-title{ position: absolute; bottom:0; left:20rpx; padding-left:32rpx; height: 56rpx; font-size: 28rpx; line-height: 56rpx; width:calc(100% - 40rpx); color:#fff; background:rgba(51,51,51,.4); }
    .banner-dot{ width:100%; text-align: center; position: absolute; top:215rpx; }
    .item-dot{ width:18rpx; height: 18rpx; background:#d8d8d8; display: inline-block; border-radius: 50%; }
    .item-dot + .item-dot{ margin-left:16rpx; }
    .active-dot{ background:#FF5C5C; }

js

bannerChange(e){
        // console.log(e)
        this.setData({
          swiperCurrent:e.detail.current
        })
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 轮播图的实现自动+手动滑动+指示+点击事件

1.图片加载框架 compile 'com.github.bumptech.glide:glide:3.5.2' 2.一个先写一个布局 <?xml

Bertha 。/ 2023年10月17日 11:56/ 0 赞/ 81 阅读

相关轮播图指示点的使用

<template> <view class="content"> <uni-swiper-dot class="uni-swiper-dot-b

系统管理员/ 2023年01月18日 11:29/ 0 赞/ 20 阅读

相关小程序轮播

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

淡淡的烟草味﹌/ 2022年12月28日 14:24/ 0 赞/ 162 阅读

相关轮播图实现（手动+自动）

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

冷不防/ 2022年12月11日 13:33/ 0 赞/ 303 阅读

相关小程序轮播指示点手动实现

由于原生的点限制太多，这里展示下，手动自己实现指示点 html  <swiper class='banner-top' indicator

灰太狼/ 2022年05月15日 10:29/ 0 赞/ 288 阅读

相关小程序轮播

效果图： ![在这里插入图片描述][2019021615131146.png] test.wxss .swiperAll { width: 100

r囧r小猫/ 2022年03月19日 10:20/ 0 赞/ 239 阅读

相关小程序自定义美化swiper组件（自定义指示点，自定义轮播样式

修改指示点修改轮播样式 1、自定义指示点 <view class="singlegraph"> <swiper class="sw

痛定思痛。/ 2021年10月01日 08:38/ 0 赞/ 763 阅读

相关微信小程序实现新闻轮播、禁止手动竖向滑动

效果 ![在这里插入图片描述][20201229160257764.gif_pic_left] 图片 ![news.png][] WXML 在 `

迷南。/ 2021年09月07日 05:58/ 0 赞/ 556 阅读

相关小程序轮播图

方法一： js代码 Page({ data: { //轮播图配置 autoplay: t

傷城~/ 2021年08月14日 00:13/ 0 赞/ 482 阅读

相关微信小程序禁止轮播手动滑动

<swiper current="{ {tab_text}}" > <swiper-item catchtouchmove="sto

妖狐艹你老母/ 2021年07月24日 11:12/ 0 赞/ 520 阅读