微信小程序 swiper轮播 自定义indicator-dots样式
index.wxml
<view class="swiperContainer">
<swiper bindchange="swiperChange" autoplay="{{autoplay}}" duration="{{duration}}" style='height: 660rpx;'>
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item wx:key="*this">
<image src="{{item}}" class="slide-image" class='img' />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="*">
<view class="dot{{index == current ? ' active' : ''}}"></view>
</block>
</view>
</view>
index.wxss
.swiperContainer {
position: relative;
}
.img {
width: %;
height: %
}
.imageCount {
width:120rpx;
height:50rpx;
background-color: rgba(, , , 0.3);
border-radius:40rpx;
line-height:50rpx;
color:#fff;
text-align:center;
font-size:26rpx;
position:absolute;
left:13px;
bottom:20rpx;
} .dots{
position: absolute;
left: ;
right: ;
bottom: 100rpx;
display: flex;
justify-content: center;
}
.dots .dot{
margin: 5rpx;
width: 50rpx;
height: 8rpx;
background: #;
border-radius: 8rpx;
transition: all .6s;
}
.dots .dot.active{
width: 50rpx;
background: #;
}
index.js
// pages/goodsDetails/goodsDetails.js
Page({
data: {
duration: "",
imgUrls: [
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
],
current: ,
},
swiperChange: function(e) {
var that = this;
if (e.detail.source == 'touch') {
that.setData({
current: e.detail.current, })
}
},
onLoad: function(options) { },
onShow: function() { }, })
微信小程序 swiper轮播 自定义indicator-dots样式的更多相关文章
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- 小程序图片轮播特效swiper(纯手打)
前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序:其中wxml和wxss的样式说明
微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...
随机推荐
- 异步 async & await
1 什么是异步 异步的另外一种含义是计算机多线程的异步处理.与同步处理相对,异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程. 2 异步场景 l 不 ...
- tomcat+nginx实现
这里采用tomcat安装包 tomcat 版本说明: 9.0.17 nginx 版本说明: 1.14.2 jdk 版本说明: 1.8.0 创建目录 [root@web02 /]# m ...
- img添加预加载图片
< img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';&q ...
- Node.js建立服务、路径处理与响应
通过Node.js创建一个web服务器,要写的代码可能不是最少的,但是一定是最容易理解的. 用6行代码创建的web服务器 当在浏览器中访问http://127.0.0.1:1337会看到自定义的字样 ...
- opencv学习之路(34)、SIFT特征匹配(二)
一.特征匹配简介 二.暴力匹配 1.nth_element筛选 #include "opencv2/opencv.hpp" #include <opencv2/nonfree ...
- sql取整数
[四舍五入取整]select round(1.1,0) 执行结果为1: [向下取整]select floor(1.1) 执行结果为2: [向上取整] select ceiling(1.1) 执行结果为 ...
- snmp模拟器snmpsid使用
snmpsim使用 安装 pip install snmpsim 简单使用 生成snmpwalk文件: snmpwalk -v2c -c 'password' -ObentU 218.200.x.15 ...
- flask-login模块
flask-login为flask提供了用户会话管理.他处理了日常的登入,登出并且长时间记住用户的会话. 1.在会话中存储当前活跃的用户ID,让你能够自由地登入和登出. 2.让你限制登入或登出用户可以 ...
- postgresql之json操作
--string 转 json select '{"Items":[{"Id":1,"InitStartDate":"2018-0 ...
- Go-单元测试
文章转载地址:https://www.flysnow.org/2017/05/16/go-in-action-go-unit-test.html 什么是单元测试? 单元测试一般用来测 ...