• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

知了堂学习笔记-微信小程序(swiper-item切换)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

首先在WXML、WXSS、JS中完成静态布局

WXML:

WXSS:

JS:

效果图:

 在WXML上绑定事件

在button组件上绑定名为click的bindtap事件

在swiper组件上绑定名为change的bindchange事件

在JS文件中描述事件触发的函数

1.在控制台打印click事件所绑定的组件信息

 

选择打印特定的信息"click"

 随意点击button组件

 同样

2.在JS文件中利用事件函数来达到切换的效果

首先声明一个中间变量,变量用于传递click和current的值

在WXML文件中,将JS中的num数据绑定到current属性上

在click事件中描述事件(赋值)

change事件描述

按钮被选择效果

在button组件上利用?:三元运算符绑定类名(如果当前按钮被选中则类名action存在)

利用类选择器添加WXSS样式

因为num初始值为0

所以效果为

 

 

                                                                                                                                             2018/2/10

 

                                                                                                知了堂有温度的大学生众筹学习社区

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 Image 图片实现宽度100%,高度自适应发布时间:2022-07-18
下一篇:
Java实现日历小程序【代码】发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap