微信小程序 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有关了 ...
随机推荐
- 551.学生出勤记录I
/* * @lc app=leetcode.cn id=551 lang=java * * [551] 学生出勤记录 I * * https://leetcode-cn.com/problems/st ...
- jenkins+Gitlab+maven+tomcat实现自动集成、打包、部署
一.前言 首先出于提高自己技术水平和琢磨能做点什么能提高工作效率,上线工作实在无聊.重复(手动编译.打包,传包,重启),于是就想到了jenkins,jenkins持续集成已经不是什么新鲜的话题,网上文 ...
- [BZ4923][Lydsy1706月赛]K小值查询
K小值查询 题面 维护一个长度为n的正整数序列a_1,a_2,...,a_n,支持以下两种操作: 1 k,将序列a从小到大排序,输出a_k的值. 2 k,将所有严格大于k的数a_i减去k. Input ...
- 字符串Contains匹配失效
参考博客:https://blog.csdn.net/lewky_liu/article/details/79353151 在编码过程中发现一个很神奇的事情,使用String.contains方法失效 ...
- Linux基础命令---sar显示系统活动信息
sar sar指令用来收集.报告.保存系统的活动信息.sar命令将操作系统中选定的累积活动计数器的内容写入标准输出.会计系统根据参数“interval”.“count”中的值,写入以秒为单位的指定间隔 ...
- react 父子组件通信
import React from 'react'; import B from './B'; class A extends React.Component{ state = { msg:'我来自于 ...
- flask框架----整合Flask中的目录结构
一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from ...
- 安卓入门——————简单记账本的开发(用sqlite存储数据)(一)
设计思想————首先要确定有几个页面.和每个页面的大致布局 由于是入门,我也是学习了不是很长的时间,所以项目比较low.... 第一个页面,也就是打开APP的首页面: 今天这个博客,先实现添加功能!: ...
- Powershell获取硬件信息
1.获取系统的BIOS的信息: Get-WMIObject -Class Win32_BIOS 2.获取内存信息: Get-WMIObject -Class Win32_PhysicalMemory ...
- ElasticSearch(十一)Elasticsearch清空指定Index/Type数据
POST /index_name/type_name/_delete_by_query?conflicts=proceed { "query": { "match_all ...