当前位置：首页 > 编程日记 > 正文

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现

编程日记 2024-08-06 09:10:00

效果图：

实现代码：

wxml


<view class="card card_b"><swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}"><block wx:for="{{imgUrls}}" wx:key="unique"><swiper-item><view catchtap="click_swiper" id="{{index}}"><image src="{{item}}" class="img"></image></view></swiper-item></block></swiper><view class="s_b"><block wx:for="{{imgUrls}}" wx:key="unique"><view class="dot {{index == swiperCurrent ? ' active' : ''}}"></view></block></view>
</view>

Page({data: {// 轮播swiperCurrent: 0,imgUrls: ['/images/banner1.jpg','/images/banner2.jpg','/images/banner3.jpg','/images/banner4.jpg'],},// 轮播swiperChange: function(e) {this.setData({index: e.detail.current,swiperCurrent: e.detail.current})},onLoad: function (options) {},
})

css

.card {background: white;border-radius: 15rpx;margin-bottom: 30rpx;width: 94%;margin-left: 3%;
}.card_b {min-width: 80%;min-height: 200rpx;position: fixed;bottom: 20rpx;background: #efeff3;
}swiper {height: 200rpx;border-radius: 15rpx;
}swiper-item {/* position: relative; */border-radius: 15rpx;
}swiper-item .img {height: 200rpx;width: 100%;border-radius: 15rpx;
}.s_b {position: fixed;bottom: 66rpx;right: 36rpx;display: flex;justify-content: center;
}.dot {height: 2px;width: 22rpx;background: white;margin-right: 6rpx;
}.active {background: red;
}

到这就完成了，下面是把它封装成自定义组件的代码和引用方式。

自定义组件轮播图的实现

在项目跟目录创建 components 文件夹，里面创建 swiper 自定义组件：

swiper.js

Component({properties: {// 这里定义了innerText属性，属性值可以在组件使用时指定innerText: {type: String,value: 'default value',}},data: {// 轮播swiperCurrent: 0,imgUrls: ['/images/banner1.jpg','/images/banner2.jpg','/images/banner3.jpg','/images/banner4.jpg'],},methods: {// 这里是一个自定义方法// 轮播swiperChange: function (e) {this.setData({index: e.detail.current,swiperCurrent: e.detail.current})},}
})

swiper.json

{"component": true
}

swiper.wxml


<view class="card card_b"><swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}"><block wx:for="{{imgUrls}}" wx:key="unique"><swiper-item><image src="{{item}}" class="img"></image><view class="s_b"><block wx:for="{{imgUrls}}" wx:key="unique"><view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view></block></view></swiper-item></block></swiper>
</view>

swiper.wxss

.card {background: white;border-radius: 15rpx;margin-bottom: 30rpx;width: 94%;margin-left: 3%;
}.card_b {min-width: 80%;min-height: 200rpx;position: absolute;bottom: 20rpx;background: blue;
}swiper{height: 200rpx;
}swiper-item {position: relative;
}
swiper-item .img{height: 200rpx;border-radius: 15rpx;
}
.s_b {position: absolute;bottom: 26rpx;right: 26rpx;display: flex;justify-content: center;
}.dot {height: 2px;width: 22rpx;background: white;margin-right: 6rpx;
}
.active{background: red;
}

引用该自定义组件：

在引用的页面的json配置文件中添加：

{"usingComponents": {"my_swiper": "../../components/swiper/swiper"}
}

在引用的页面的wxml文件中添加：

<my_swiper />

完成

https://www.dkcj.cn/info/13051.html

好看的dialog,sweet Alert Dialog 导入Android Studio

系统自带的dialog实在是丑到无法忍受。所以找到了一款比較好的第三方dialog。 github 地址例如以下: https://github.com/pedant/sweet-alert-dialog 老规矩，还是先看效果图！ 以下来介绍导入Android studio的方法首先将github上的项目clone到本地。然后…

编程日记2024/08/06 09:00:00

linux系统中删除文件夹

rm -rf 文件夹的名称 rm-r 文件名称转载于:https://www.cnblogs.com/chucklu/p/4890523.html

编程日记2024/08/06 08:50:00

unity开发入门Unity is a great tool for prototyping everything from games, to interactive visualisations. In this article, we run through all you need to know to get started using Unity.Unity是一个很好的工具，可用于制作从游戏到交互式可视化等所有内…

编程日记2024/08/06 08:40:00

uvalive 3218 Find the Border

题意：一条封闭折线将平面分成了若干个区域，按顺序给出折线各点的坐标，要求输出封闭折线的轮廓。题解：用类似卷包裹的算法，先确定一个一定会被选中的点(x坐标最小，y坐标最小)作为起点，然后把可…

编程日记2024/08/06 08:30:00

[Mac] mac linux 多线程下载利器 axel

> 之前做过一些文件下载的统计，发现谷歌浏览器chrome和火狐firefox, 一般都是单线程的下载文件，360浏览器却是多线程的下载。如今切换到了mac上，发现没有360哪个浏览器，就像找个在linux或者mac下能够多线程下载的工具。 linu…

编程日记2024/08/06 08:20:00

antd 表单提交，文件和表单内容一起提交，表单校验

用很简单的源码实现包含下列 antd 表单相关知识： 1.表单必填校验，规则校验 2.Upload 上传图片，获取上传图片的状态，如上传成功，上传失败，上传进度条，删除上传的文件 3.获取 Input 组件用户输入的值，设置默认值 4.提交表单不刷新页面 5.把上传的图片显示在页面页面…

编程日记2024/08/06 08:10:00

代码注释//_您应该停止编写//的五个代码注释，并且//应该开始的一个注释

代码注释//提供来自您最喜欢和最受欢迎的开源项目的示例-React，Angular，PHP，Pandas等！ (With examples from your favorite and most popular open source projects — React, Angular, PHP, Pandas and more!) 代码质量与注释之间…

编程日记2024/08/06 08:00:00

eclipse安装maven

maven 下载地址：http://maven.apache.org/download.cgi 1.maven环境配置将下载的maven解压到某一盘下，进入E:\maven\apache-maven-3.3.9\conf目录，修改setting.xml文件找到<localRepository>节点，配置本地仓库的地址&…

编程日记2024/08/06 07:50:00

微信小程序循迹功能制作

规划地图的路径，实时获取用户当前的定位，进行路线循迹导航功能的开发： 效果图： 实现代码： <map id"map" enable-satellite longitude"{{longitude1}}" latitude"{{latitude1}}" sca…

编程日记2024/08/06 07:40:00

DOM解析和SAX解析的区别

DOM解析和SAX解析的区别博客分类： XMLDOM SAX DOM解析和SAX解析的区别 No区别DOM解析SAX解析1操作将所有文件读取到内存中形成DOM树，如果文件量过大，则无法使用顺序读入所需要的文件内容，不会一次性全部读取，不受文件…

编程日记2024/08/06 07:30:00

java编写代码用什么_如何学习用Java编写代码：为什么要学习以及从哪里开始

java编写代码用什么by John Selawsky约翰塞劳斯基(John Selawsky) 如何学习用Java编写代码：为什么要学习以及从哪里开始 (How to learn to code in Java: why you should and where to start) Define your career goals and choose a language. This is the most i…

编程日记2024/08/06 07:20:00

迷宫寻宝（搜索）

迷宫寻宝（一） 时间限制：1000 ms | 内存限制：65535 KB难度：4描述一个叫ACM的寻宝者找到了一个藏宝图，它根据藏宝图找到了一个迷宫，这是一个很特别的迷宫，迷宫里有N个编过号的门&…

编程日记2024/08/06 07:10:00

理解Python的迭代器(转)

原文地址: http://python.jobbole.com/81916/ 另外一篇文章: http://www.cnblogs.com/kaituorensheng/p/3826911.html 什么是迭代可以直接作用于for循环的对象统称为可迭代对象(Iterable)。可以被next()函数调用并不断返回下一个值的对象称为迭代器(Iterator)。所有的Iterab…

编程日记2024/08/06 07:00:00

快捷导航动画制作

做了一个仿大众点评的快捷导航动画效果，点击导航内的箭头，导航缩放，点击快捷导航再伸展。看效果图： 实现代码： <block wx:if"{{!isCustom}}"><view class"home_and_reSource" animati…

编程日记2024/08/06 06:50:00

instant apps_Android Instant Apps 101：它们是什么以及它们如何工作

instant appsby Tomislav Smrečki通过TomislavSmrečki Android Instant Apps are a cool new way to consume native apps without prior installation. Only parts of the app are downloaded and launched, giving the users a native look and feel in a couple of secon…

编程日记2024/08/06 06:40:00

数据库分享一： MySQL的Innodb缓存相关优化

无论是对于哪一种数据库来说，缓存技术都是提高数据库性能的关键技术，物理磁盘的访问速度永远都会与内存的访问速度永远都不是一个数量级的。通过缓存技术无论是在读还是写方面都可以大大提高数据库整体性能。Innodb_buffer_pool_size 的合理设置Innodb…

编程日记2024/08/06 06:30:00

用过美德乐吸奶器的宝妈们感觉比国产吸奶器怎么样啊？

药效好不好，看疗效就知道。吸奶器好不好看评价就知道。我们来看看美德乐吸奶器天猫旗舰店 : http://medela.wang 的宝妈们的评价如可拔奶神器，绝对好过贝亲！最初一次七八十，后来一百多，现在可以翻个倍。结合宝宝吮吸…

编程日记2024/08/06 06:20:00

小程序地图多个 circles 使用demo

效果图： 代码： var that; const app getApp() const util require("../../utils/util.js") const data require("../../utils/map.js") Page({data: {pageShow: false,scale: 15,obj: {},longitude: 116.34665554470486,latitud…

编程日记2024/08/06 06:10:00

编写文档_如何通过编写优质文档来使自己的未来快乐

编写文档by Gabriele Cimato加布里埃莱西马托(Gabriele Cimato) 如何通过编写优质文档来使自己的未来快乐 (How to make your future self happy by writing good docs) 或者，在清除旧代码库时如何减少痛苦 (Or how to be less miserable when dusting off an old …

编程日记2024/08/06 06:00:00

（转载）人人都会OSGI--实例讲解OSGI开发

http://longdick.iteye.com/blog/457310转载于:https://www.cnblogs.com/eecs2016/articles/7422310.html

编程日记2024/08/06 05:50:00

小程序json字符串转 json对象 { name :你好} 转成 { name :你好}

解决后端接口返回 var obj "{ name :"你好"}" 类似这样的数据，对象或者数组外面包了一层引号， 把这种数据转成 var obj { name :"你好"}； 直接上代码： // pages/test/test.js Page({jsonStrToJ…

编程日记2024/08/06 05:40:00

每天写的叫工作日志，每周写的总结叫周报，每月写的叫月报

有些时候，老板会突发让您求每天都要写工作周报，什么项目什么任务，完成情况，完成花费的时间等，然后汇总部门周报；也不是写不出，只是不知道有时候重复做一个项目，到底每天有什么好写&a…

编程日记2024/08/06 05:30:00

为什么分散刷新没有死时间_分散项目为何失败（以及如何处理）

为什么分散刷新没有死时间The most exciting thing about working in the decentralized economy is the fact that no one has any idea as to where it’ll all end up!在去中心decentralized economy工作最令人振奋的事情是，没有人知道最终的结果！ T…

编程日记2024/08/06 05:20:00

.NET Core 常用加密和Hash工具NETCore.Encrypt

前言在日常开发过程中，不可避免的涉及到数据加密解密（Hash）操作，所以就有想法开发通用工具，NETCore.Encrypt就诞生了。目前NETCore.Encrypt只支持.NET Core ,工具包含了AES,DES,RSA加密解密，MD5&#xff0…

编程日记2024/08/06 05:10:00

url 通配符解析成参数

需求：url 参数是通配符，需要把通配符解析成参数并且拼接到 url 中例如：https://xxx.cn/index.html$a1$b2; 解析成 https://xxx.cn/index.html?a1&b2; 时间关系，直接上代码，有时间再补上注释下面是小程序页…

编程日记2024/08/06 05:00:00

性能测试分享：系统架构

性能测试分享：系统架构转载于:https://www.cnblogs.com/poptest/p/4904584.html

编程日记2024/08/06 04:50:00

graphql是什么_为什么GraphQL是避免技术债务的关键

graphql是什么GraphQL (not to be confused with GraphDB or Open Graph or even an actual graph) is a remarkably creative solution to a relatively common problem: How do you enable front end developers to access backend data in exactly the way they need it?Gr…

编程日记2024/08/06 04:40:00