当前位置:网站首页>Applet sliding, clicking and switching simple UI
Applet sliding, clicking and switching simple UI
2022-07-07 09:48:00 【Dehong demon king】
List of articles
【 Zero foundation wechat applet introduction development 】 Small program introduction and environment construction
【 Zero foundation wechat applet introduction development 】 Configure applets
【 Zero foundation wechat applet introduction development 】 Applet framework 1
【 Zero foundation wechat applet introduction development 】 Applet framework 2
【 Zero foundation wechat applet introduction development 】 Basic ability ( One )
【 Zero foundation wechat applet introduction development 】 Basic ability ( Two )
Applet slide 、 Click to switch succinctly UI
Development encountered , Simply record , Slide the applet or click to switch styles
There's no demonstration here , Go straight to the code
wxml
<view>
<!-- Tab Layout -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0'>
<text class="{
{0 == currentIndex ? 'fontColorBox' : ''}}"> Android </text>
<hr class="{
{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1'>
<text class="{
{1 == currentIndex ? 'fontColorBox1' : ''}}"> Apple </text>
<hr class="{
{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
<!-- Content layout -->
<swiper class='swiperTtemBox' bindchange='pagechange' current='{
{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view> Content 1</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view> Content 2</view>
</swiper-item>
</swiper>
</view>
js
const app = getApp()
Page({
data: {
currentIndex: 0, // Default first
},
pagechange: function (ee) {
if ("touch" === ee.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
this.setData({
currentIndex: currentPageIndex,
})
}
},
// Click on tab Trigger when
titleClick: function (e) {
this.setData({
// Get the current index and change it dynamically
currentIndex: e.currentTarget.dataset.idx
})
},
})
Put the code you need to write in the content 1 Replace it , You can easily click or slide the switch window ,js Data interaction can be handled uniformly , The same load is just the layout of the display , Others are the same
️️️️️️ 🥳🥳🥳 Thousands of people , Thank you for reading my article at this moment , Thanks for watching , Hello, everyone , Welcome to the artificial intelligence exchange group ( Watch my news ), More peripheral benefits are waiting for you 🥳🥳🥳
Welcome to subscribe to this column or follow me , Let's work together to solve an algorithm problem every day
️️️ Last , I hope my article can be helpful to your !
I wish myself and you in the future , Keep learning , Keep improving , Keep loving , Go to the mountains and seas ! ️️️
边栏推荐
- 基于智慧城市与储住分离数字家居模式垃圾处理方法
- How to speed up video playback in browser
- [4g/5g/6g topic foundation-146]: Interpretation of white paper on 6G overall vision and potential key technologies-1-overall vision
- 大佬们,请问 MySQL-CDC 有什么办法将 upsert 消息转换为 append only 消
- Natapp intranet penetration
- golang select机制和超时问题怎么解决
- Information Security Experiment 3: the use of PGP email encryption software
- Communication mode between processes
- Application of C # XML
- CentOS installs JDK1.8 and mysql5 and 8 (the same command 58 in the second installation mode is common, opening access rights and changing passwords)
猜你喜欢
章鱼未来之星获得25万美金奖励|章鱼加速器2022夏季创业营圆满落幕
Sqlplus garbled code problem, find the solution
Basic use of JMeter to proficiency (I) creation and testing of the first task thread from installation
数据建模中利用3σ剔除异常值进行数据清洗
【BW16 应用篇】安信可BW16模组/开发板AT指令实现MQTT通讯
其实特简单,教你轻松实现酷炫的数据可视化大屏
Diffusion模型详解
Oracle installation enhancements error
[bw16 application] Anxin can realize mqtt communication with bw16 module / development board at instruction
【原创】程序员团队管理的核心是什么?
随机推荐
第一讲:鸡蛋的硬度
细说Mysql MVCC多版本控制
Niuke - Huawei question bank (61~70)
Esp8266 uses TF card and reads and writes data (based on Arduino)
How to solve the problem of golang select mechanism and timeout
2020CCPC威海 J - Steins;Game (sg函数、线性基)
4、 Fundamentals of machine learning
ViewPager2和VIewPager的區別以及ViewPager2實現輪播圖
MySQL can connect locally through localhost or 127, but cannot connect through intranet IP (for example, Navicat connection reports an error of 1045 access denied for use...)
thinkphp3.2信息泄露
CDZSC_2022寒假个人训练赛21级(2)
HCIP 第一天 笔记整理
Binary tree high frequency question type
【BW16 应用篇】安信可BW16模组/开发板AT指令实现MQTT通讯
Database multi table Association query problem
MongoDB怎么实现创建删除数据库、创建删除表、数据增删改查
asp. How to call vb DLL function in net project
PostgreSQL创建触发器的时候报错,
14th test
The difference between viewpager2 and viewpager and the implementation of viewpager2 in the rotation chart