当前位置:首页 > javascript技术文章 > 微信小程序修改swiper默认指示器样式的实例代码

微信小程序修改swiper默认指示器样式示例效果

  • 发布时间:
  • 作者:码农之家原创
  • 点击:194

这篇文章主要知识点是关于swiper、javascript、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

精通JavaScript
精通JavaScript高清第2版
  • 类型:JavaScript大小:33.5 MB格式:PDF作者:陈贤安
立即下载

微信小程序修改swiper默认指示器样式的实例代码

修改官方swiper样式

从微信官方微信开发文档中心复制swiper 代码块。

wxml定义

<view class="wrap">
 <swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange"> 
  <block wx:for="{{imgUrls}}"> 
   <swiper-item> 
     <image src="{{item}}" class="slide-image" width="100%" height="150" ></image> 
   </swiper-item> 
  </block> 
 </swiper> 
 <!--重置小圆点的样式 -->
 <view class="dots"> 
  <block wx:for="{{imgUrls}}"> 
   <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view> 
  </block> 
 </view> 
</view>

wxss定义样式

.wrap {
 height: auto;
 position: relative;
 width: 100%;
}
.swipers {
 height: 350rpx;
 width: 100%;
}
.slide-image {
 display: block;
 width: 100%;
 height: 100%;
}
/*用来包裹所有的小圆点 */
.dots {
 width: 156rpx;
 height: 36rpx;
 display: flex;
 flex-direction: row;
 position: absolute;
 left: 320rpx;
 bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.dot {
 width: 26rpx;
 height: 26rpx;
 border-radius: 50%;
 margin-right: 26rpx;
 background-color: white;
}
/*选中以后的小圆点样式 */
.active {
 width: 26rpx;
 height: 26rpx;
 background-color: coral;
}

赋值

Page({
 data: {
 imgUrls: [
  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 currentSwiper: 0,
 autoplay: true
 },
 swiperChange: function (e) {
 this.setData({
  currentSwiper: e.detail.current
 })
 }
}) 

效果图:

微信小程序修改swiper默认指示器样式的实例代码

总结

以上所述是小编给大家介绍的微信小程序修改swiper默认指示器样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

IntelliJ IDEA 注册码(激活到2089年)

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

展开 +

收起 -

javascript 相关电子书
学习笔记
网友NO.174274

JavaScript标准对象知识点总结

在JavaScript的世界里,一切都是对象。 但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // numbertypeof NaN; // numbertypeof str; // stringtypeof true; // booleantypeof undefined; // undefinedtypeof Math.abs; // functiontypeof null; // objecttypeof []; // objecttypeof {}; // object 可见, number、string、boolean、function 和 undefined 有别于其他类型。特别注意null的类型是object,Array的类型也是object,如果我们用typeof将无法区分出null、Array和通常意义上的object{}。 包装对象 除了这些类型外,JavaScript还提供了包装对象,熟悉Java的小伙伴肯定很清楚int和Integer这种暧昧关系。 number、boolean和string都有包装对象。没错,在JavaScript中,字符串也区分string类型和它的包装类型。包装对象用new创建: var n = new Number(123); // 123,生成了新……

网友NO.301091

JavaScript数组的5种迭代方法

ES5为数组定义了5个迭代方法。每种方法都接收两个参数。要在每一项上运行的函数和(可选的)运行该函数的作用域对象--影响this的值。//其中(可选的)这个参数暂时未遇到过。 其中,函数都接收三个参数(数组中的每一项、每一项的索引值、数组对象本身)。 下面是5中方法的介绍: every() : 对数组中的每一项执行函数,如果每一项都返回 true ,则该方法返回 true。 some(): 对数组中的每一项执行函数,只要有一项返回了 true ,则该方法返回 true。 filter(): 对数组中的每一项执行函数,把里面返回 true 的项,组成一个数组返回。 forEach() 对数组中的每一项执行函数,没有返回值。类似于for循环。 map() 对数组中的每一项执行函数,返回(处理后的)每一项。 以上5种方法,都不会改变数组本身。 forEach和map的比较: var arr = [1,2,3,4,5]; //every() filter() some() for……

网友NO.296899

Javascript es7中比较实用的两个方法示例

本文主要跟大家介绍了关于es7中两个比较实用的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 一、、operator (求幂运算符)** console.log(2**3);//8console.log(4**4);//256//以往的写法console.log(Math.pow(2,3));//8console.log(Math.pow(4,4));//256 还不是很简单,两个*号就能进行求幂运算 1.Array.prototype.includes es6为字符串添加了一个includes方法,现在同样运用与数组 l=[1,2,3]l.includes(5)//false 跟数组一样 2.字符填充函数padStart 和 padEnd padStart() 在开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。从字符串的左边开始 padEnd从字符串的尾端右边开始填充。第二个参数,你能实际上用一个任何长度的字符串。 console.log('react'.padStart(10).length) // " react" is 10console.log('backbone'.padStart(10).length) // " backbone" is 10 console.log('react'.pa……

网友NO.304907

你有必要知道的10个JavaScript难点

能够读懂这篇博客的JavaScript开发者,运气不会太差… 1. 立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ...})(); function(){…}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。立即执行函数也可以理解为立即调用一个匿名函数。立即执行函数最常见的应用场景就是:将var变量的作用域限制于你们函数内,这样可以避免命名冲突。 2. 闭包 对于闭包(closure),当外部函数返回之后,内部函数依然可以访问外部函数的变量。 function f1(){ var N = 0; // N是f1函数的局部变量 function f2() // f2是f1函数的内部函数,是闭包 { N += 1; // 内部函数f2中使用了外部函数f1中的变量N console.log(N);……

网友NO.590719

JavaScript ES6中const、let与var的对比详解

ECMAScript 6 新增 const 和 let 命令,用来声明变量。 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升: const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1);// 报错// Uncaught ReferenceError: c1 is not defined const c1 = 'c1';let l1 = 'l1';var v1 = 'v1'; 作用域: const,let 支持块级作用域,有效避免变量覆盖 const c21 = 'c21';let l21 = 'l21';var v21 = 'v21'; if (0.1 + 0.2 != 0.3) { const c21 = 'c22'; let l21 = 'l22'; var v21 = 'v22'; console.log(c21, l21, v21); // 输出 c22 l22 v22} console.log(c21, l21, v21);// 输出 c21 l21 v22 块级作用域,在外层不能直接访问内层变量 if (0.1 + 0.2 != 0.3) { const c22 = 'c22'; let l22 = 'l22'; var v22 = 'v22'; console.log(c22, l22, v22); // 输出 c22 l22 v22} console.log(c22, l22, v22);// 报错// Uncaught ReferenceError: c22 is not define……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757