怎么新建MySQL数据库
发布时间：2022-11-19
作者：admin
阅读：247
阅读：247
这篇主要是介绍“微信小程序怎样制作tab页面切换，代码是什么”的内容了，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家解决微信小程序怎样制作tab页面切换，代码是什么的问题，下面我们一起来了解看看吧。
“微信小程序怎样制作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,
},
//获取当前滑块的index
bindchange(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 - 1
if(currentData + 1 == 0){
wx.showToast({
title: '这是第1题了',
})
}else{
this.setData({
currentData:currentData
})
}
},
//下一题
nextClick(){
this.setData({
currentData:this.data.currentData + 1
})
},“微信小程序怎样制作tab页面切换，代码是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理