当前位置:网站首页>小程序滑动、点击切换简洁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数据交互统一处理即可,同一加载只是显示的排版布局而已,其他一样的
️️️️️️ 🥳🥳🥳 茫茫人海千千万万,感谢这一刻你看到了我的文章,感谢观赏,大家好呀,欢迎加入人工智能交流群(看我的动态),更多周边福利等你🥳🥳🥳
欢迎订阅本专栏或者关注我,大家一起努力每天一题算法题
️️️ 最后,希望我的这篇文章能对你的有所帮助!
愿自己还有你在未来的日子,保持学习,保持进步,保持热爱,奔赴山海! ️️️
边栏推荐
- 用flinksql的方式 写进 sr的表,发现需要删除的数据没有删除,参照文档https://do
- ViewPager2和VIewPager的区别以及ViewPager2实现轮播图
- VSCode+mingw64+cmake
- NATAPP内网穿透
- Binary tree high frequency question type
- Where is the answer? action config/Interceptor/class/servlet
- Octopus future star won a reward of 250000 US dollars | Octopus accelerator 2022 summer entrepreneurship camp came to a successful conclusion
- JS judge whether checkbox is selected in the project
- Mysql:select ... for update
- How to become a senior digital IC Design Engineer (1-6) Verilog coding Grammar: Classic Digital IC Design
猜你喜欢
ComputeShader
How to use clipboard JS library implements copy and cut function
Nested (multi-level) childrn routes, query parameters, named routes, replace attribute, props configuration of routes, params parameters of routes
In fact, it's very simple. It teaches you to easily realize the cool data visualization big screen
Netease cloud wechat applet
First issue of JS reverse tutorial
农牧业未来发展蓝图--垂直农业+人造肉
華為HCIP-DATACOM-Core_03day
Network request process
Binary tree high frequency question type
随机推荐
12、 Sort
CSDN salary increase technology - learn about the use of several common logic controllers of JMeter
软件建模与分析
【无标题】
How to become a senior digital IC Design Engineer (5-3) theory: ULP low power design technology (Part 2)
Netease Cloud Wechat applet
Unity shader (pass user data to shader)
Interface test API case, data and interface separation
PostgreSQL创建触发器的时候报错,
如何使用clipboard.js库实现复制剪切功能
Nested (multi-level) childrn routes, query parameters, named routes, replace attribute, props configuration of routes, params parameters of routes
H5 web player easyplayer How does JS realize live video real-time recording?
Final keyword
Regular matching starts with XXX and ends with XXX
NATAPP内网穿透
The difference between viewpager2 and viewpager and the implementation of viewpager2 in the rotation chart
进程和线程的区别
请教个问题,我用sql-client起了个同步任务,从MySQL同步到ADB,历史数据有正常同步过去
沙龙预告|GameFi 领域的瓶颈和解决方案
flex弹性布局