微信小程序 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有关了 ...
随机推荐
- CentOS 7 本地安装kubernetes
环境 : CentOS7 master 192.168.94.11 node1 192.168.94.22 node2 192.168.94.33 关闭防火墙.SElinux 安装包地址 : 链 ...
- 跨站访问如何保证session的正常使用
1.最近公司开发了一个网站项目,一切顺利.由于网页没有兼容手机浏览器,后来添加了一个webapp端,独立于另一个站点,用于解决兼容手机浏览器的问题.其中webapp端的数据全部通过ajax进行请求另一 ...
- mysql数据库设计三范式
为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...
- Log4j2 日志级别
Log4j2日志级别 级别 在log4j2中, 共有8个级别,按照从低到高为:ALL < TRACE < DEBUG < INFO < WARN < ERROR < ...
- laravel blog edit
模板复制create的模板 主要修改的地方 <form action="{{ url('admin/article/'.$article->id) }}" method ...
- arcgis for js symbol图标的变化
需求是图标有hover效果 ,如下 思路 : 1.创建图片标记,并赋值: args.rendererArgs = new RenderArgs(); args.rendererArgs.typ ...
- liunx驱动----按键中断
liunx 中断 先设置异常入口 异常向量 void __init trap_init(void) 构造了异常向量 vector_irq+offset 按下按键: cpu自动进入异常模式 ...
- 服务器被疑似挖矿程序植入,发现以及解决过程(建议所有使用sonatype/nexus3的用户清查一下)
此次服务器被植入挖矿程序发现起来较为巧合,首先是上周三开始,我通过sonatype/nexus3搭建的仓库间歇性崩溃,但是每次重新start一下也能直接使用所以没有彻底清查,去docker logs里 ...
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- B/S架构图解