当前位置:网站首页>小程序滑动、点击切换简洁UI
小程序滑动、点击切换简洁UI
2022-07-07 07:08:00 【德宏大魔王】
系列文章目录
【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
【零基础微信小程序入门开发】小程序框架一
【零基础微信小程序入门开发】小程序框架二
【零基础微信小程序入门开发】基础能力(一)
【零基础微信小程序入门开发】基础能力(二)
小程序滑动、点击切换简洁UI
开发遇到了,就简单的记录下,小程序滑动或者点击切换样式
这里不做演示了,直接上代码
wxml
<view>
<!-- Tab布局 -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0'>
<text class="{
{0 == currentIndex ? 'fontColorBox' : ''}}">安卓</text>
<hr class="{
{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1'>
<text class="{
{1 == currentIndex ? 'fontColorBox1' : ''}}">苹果</text>
<hr class="{
{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
<!-- 内容布局 -->
<swiper class='swiperTtemBox' bindchange='pagechange' current='{
{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view>内容1</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view>内容2</view>
</swiper-item>
</swiper>
</view>
js
const app = getApp()
Page({
data: {
currentIndex: 0, //默认第一个
},
pagechange: function (ee) {
if ("touch" === ee.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
this.setData({
currentIndex: currentPageIndex,
})
}
},
//点击tab时触发
titleClick: function (e) {
this.setData({
//拿到当前索引并动态改变
currentIndex: e.currentTarget.dataset.idx
})
},
})
需要写的代码放在内容1替换即可,即可实现轻松的点击或者滑动切换窗口,js数据交互统一处理即可,同一加载只是显示的排版布局而已,其他一样的
️️️️️️ 🥳🥳🥳 茫茫人海千千万万,感谢这一刻你看到了我的文章,感谢观赏,大家好呀,欢迎加入人工智能交流群(看我的动态),更多周边福利等你🥳🥳🥳
欢迎订阅本专栏或者关注我,大家一起努力每天一题算法题
️️️ 最后,希望我的这篇文章能对你的有所帮助!
愿自己还有你在未来的日子,保持学习,保持进步,保持热爱,奔赴山海! ️️️
边栏推荐
- Lecture 1: stack containing min function
- Elaborate on MySQL mvcc multi version control
- [4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
- 消费互联网的产业链其实是很短的,它仅仅承接平台上下游的对接和撮合的角色
- Yapi test plug-in -- cross request
- Strategic cooperation subquery becomes the secret weapon of Octopus web browser
- How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
- Arthas simple instructions
- iNFTnews | 时尚品牌将以什么方式进入元宇宙?
- 信息安全实验四:Ip包监视程序实现
猜你喜欢
随机推荐
在EXCEL写VBA连接ORACLE并查询数据库中的内容
[4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
Octopus future star won a reward of 250000 US dollars | Octopus accelerator 2022 summer entrepreneurship camp came to a successful conclusion
浏览器中如何让视频倍速播放
消费互联网的产业链其实是很短的,它仅仅承接平台上下游的对接和撮合的角色
信息安全实验一:DES加密算法的实现
MongoDB怎么实现创建删除数据库、创建删除表、数据增删改查
Unity shader (pass user data to shader)
Information Security Experiment 3: the use of PGP email encryption software
ViewPager2和VIewPager的區別以及ViewPager2實現輪播圖
PostgreSQL reports an error when creating a trigger,
The configuration and options of save actions are explained in detail, and you won't be confused after reading it
Oracle安装增强功能出错
Connecting mobile phone with ADB
进程和线程的区别
[4G/5G/6G专题基础-147]: 6G总体愿景与潜在关键技术白皮书解读-2-6G发展的宏观驱动力
JS逆向教程第一发
flex弹性布局
**grafana安装**
【无标题】