微信小程序实现tab页面切换效果

网友投稿 425 2023-11-12

本文实例为大家分享了微信小程序实现tab页面切换的具体代码，供大家参考，具体内容如下

微信小程序实现tab页面切换效果

html 页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<view class="bgwhite">
<scroll-view scroll-x="true">
<view class="width100 row nowrap">
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 0 ? topic : }}" data-current="0" bindtap=checkCurrent>第1题</view>
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 1 ? topic : }}" data-current="1" bindtap=checkCurrent>第2题</view>
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 2 ? topic : }}" data-current="2" bindtap=checkCurrent>第3题</view>
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 3 ? topic : }}" data-current="3" bindtap=checkCurrent>第4题</view>
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 4 ? topic : }}" data-current="4" bindtap=checkCurrent>第5题</view>
<view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 5 ? topic : }}" data-current="5" bindtap=checkCurrent>第6题</view>
</view>
</scroll-view>
</view>
<swiper current="{{currentData}}" class=width100 style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item>
<view class="m-lr-20">
<view class="row p-t-30 p-b-10">
<view class="radio_singel f22 p-lr-10">单选</view>
<view class="m-l-20 weight500 f28">题目1</view>
</view>
<radio-group bindchange="radioChange">
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio checked="true" color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">A、1111</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">B、2222</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">C、3333</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">D、4444</view>
</label>
</radio-group>
</view>
</swiper-item>
<swiper-item>
<view class="m-lr-20">
<view class="row p-t-30 p-b-10">
<view class="radio_singel f22 p-lr-10">单选</view>
<view class="m-l-20 weight500 f28">题目2</view>
</view>
<video src="" style="width:100%;"></video>
<radio-group bindchange="radioChange">
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio checked="true" color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">A、1111</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">B、2222</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">C、3333</view>
</label>
<label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
<view class="weui-cell__hd">
<radio color="#1989f9"/>
</view>
<view class="f30 weight500 m-l-10">D、4444</view>
</label>
</radio-group>
</view>
</swiper-item>
<swiper-item>
</swiper-item>
<swiper-item>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
<view class="footer p-tb-25">
<view class="m-lr-30 row just-btw">
<view class="row alignitems" bindtap="prevClick">
<image src="../../images/prev_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></image>
<view class="f36 weight500 m-l-10">上一题</view>
</view>
<view class="jiaojuanbtn f30 white p-tb-20">交卷</view>
<view class="row alignitems" bindtap="nextClick">
<view class="f36 weight500 m-r-10">下一题</view>
<image src="../../images/next_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></image>
</view>
</view>
</view>

css样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
-ic{
position: relative;
color:#000;
}
-ic::before{
position: absolute;
content:"";
width:80rpx;
height:6rpx;
background: #1989f9;
border-radius: 20rpx;
bottom: 0;
left:50%;
transform: translateX(-50%);
}
.radio_singel{
background: #e6f7ff;
border:1px solid #91d4fe;
color:#1890ff;
}
.footer{
position: fixed;
bottom: 0;
background-color: #fff;
left:0;
right:0;
}

js 页面

您可能感兴趣的文章:微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换微信小程序实现tab左右切换效果微信小程序 Tab页切换更新数据微信小程序 swiper制作tab切换实现附源码微信小程序开发之选项卡(窗口底部TabBar)页面切换微信小程序实现tab切换效果微信小程序滚动Tab实现左右可滑动切换微信小程序实现tab和swiper切换结合效果微信小程序实现tab页面切换功能微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 实例 代码
上一篇:如何在微信小程序里面退出小程序的方法
下一篇:微信小程序view与scroll-view组件的使用介绍
相关文章

 发表评论

暂时没有评论，来抢沙发吧~