微信小程序tab页面切换

html 页面

<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样式

.topic{position: relative;color:#000;
}
.topic::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 页面

 data: {currentData:0,},//获取当前滑块的indexbindchange(e){const that  = this;that.setData({currentData: e.detail.current})},//点击切换，滑块index赋值checkCurrent(e){const that = this;if (that.data.currentData === e.target.dataset.current){return false;}else{that.setData({currentData: e.target.dataset.current})}},//上一题prevClick(){var currentData = this.data.currentData - 1if(currentData + 1 == 0){wx.showToast({title: '这是第1题了',})}else{this.setData({currentData:currentData})}},//下一题nextClick(){this.setData({currentData:this.data.currentData + 1})},

微信小程序tab页面切换相关推荐

PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...
如何实现两个微信小程序之间的切换跳转
如何实现两个微信小程序之间的切换跳转 wx.navigateToMiniProgram({appId: '***************', //跳转目标小程序的appIdpath: '/pages/ ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题

微信小程序tab页面切换

微信小程序tab页面切换相关推荐

最新文章

热门文章