当前位置：网站首页>The applet realizes multi-level page switching back and forth, and supports sliding and clicking operations
The applet realizes multi-level page switching back and forth, and supports sliding and clicking operations
2022-07-07 09:48:00 【Dehong demon king】
️️️️️️ 🥳🥳🥳 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 , Everyone works together to make progress 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 ！ ️️️
Catalog
Want to keep fans , You have to arrange a demonstration ：
[ Under review …]
Then swing ！！！！
First, through swiper Create a much simpler tab page
By triggering pagechange1 The event pair in the method currentIndex To assign , And through the currentIndex The changes made the front end wxml Corresponding changes , This part is the same for sliding and clicking , It's just to make currentIndex Corresponding to their respective positions , Determine the position by numbers
// slide
pagechange1: 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
})
},
The complete code of this part is as follows ：
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='pagechange1' current='{
{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view> Content 1</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view> Content 2</view>
</swiper-item>
</swiper>
</view>
wxss
Page {
/* Global style */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* Default color of text */
color: black;
}
.navBox {
/* Top tab Box style */
width: 100%;
height: 108rpx;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.navBox view:last-child {
/* the last one tab The style of the title */
padding-left: 20%;
}
.titleBox {
/* The style of unselected text */
color: rgb(168, 170, 175);
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox,.notLineBox{
/* Check and uncheck the common style of the bottom line */
width: 32rpx;
height: 8rpx;
}
.lineBox {
/* Select the baseline style */
background: rgb(43, 44, 45);
margin-top: 16rpx;
border-radius: 4rpx;
}
.notLineBox {
/* The bottom line style is not selected */
background: transparent;
}
.swiperTtemBox {
/* Bottom content style */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
js
const app = getApp()
Page({
data: {
currentIndex: 0, // Default first
},
pagechange1: 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
})
},
})
The second step
After the last step , Add a sliding page to the lower page , When the internal switch is over , Switching is the switching operation of the parent 
stay “ Content 1” Of view in Just write the code , Because the parent code can only be less than 2 Only pages are valid , So we don't need this slide of the parent to do the child slide , Not just because bug The problem of , This also avoids the problem of style and data duplication
Here we insert wxml Code ：
<view >
<scroll-view scroll-x="true" class="tab-h" scroll-left="{
{scrollLeft}}">
<view class="tab-item {
{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav"> hot </view>
<view class="tab-item {
{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav"> Video and sound </view>
<view class="tab-item {
{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav"> read </view>
<view class="tab-item {
{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav"> game </view>
<view class="tab-item {
{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav"> welfare </view>
</scroll-view>
<swiper class="tab-content" current="{
{currentTab}}" duration="300" bindchange="switchTab"
style="height:{
{winHeight}}rpx">
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="https://profile.csdnimg.cn/9/B/A/0_qq_35230125"></image>
</view>
<view class="expertInfo">
<view class="name"> Silhouette Android </view>
<view class="tag">111 People download </view>
<view> This is just a brief introduction , Click for the most details </view>
</view>
<view class="askBtn" bindtap="show_hideModal"> download </view>
<!-- <navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask TA</navigator> -->
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
js Join in ：
data: {
winHeight:"",// Window height
currentTab:0, // Default the value of the current item
scrollLeft:0, //tab The scroll bar position of the title
currentIndex: 0, // The default is the active item Switch
hideModal:false// mask
},
Partially complete js Code ：
// pages/leftSlide/leftSlide.js
const App = getApp()
Page({
data: {
winHeight:"",// Window height
currentTab:0, // Default the value of the current item
scrollLeft:0, //tab The scroll bar position of the title
currentIndex: 0, // The default is the active item Switch
hideModal:false// mask
},
// Scroll to switch label styles
switchTab:function(e){
let that=this;
that.setData({
currentTab:e.detail.current
});
that.checkCor();
},
// Click the title to switch to the current page to change the style
swichNav:function(e){
var cur=e.target.dataset.current;
console.log(cur);
if(this.data.currentTaB==cur){
return false;}
else{
this.setData({
currentTab:cur
})
}
},
// Judge if the current scrolling is more than one screen , Set up tab Title scroll bar .
checkCor:function(){
if (this.data.currentTab>4){
this.setData({
scrollLeft:300
})
}else{
this.setData({
scrollLeft:0
})
}
},
pagechange: function (ee) {
let that=this;
console.log(ee.detail.source)
if ("touch" === ee.detail.source) {
let currentPageIndex = that.data.currentIndex;
currentPageIndex = (currentPageIndex+1) % 2;
that.setData({
currentIndex: currentPageIndex,
})
}
},
// eject 、 Hide the mask layer
show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})
},
hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
//
// Switch
// Switch swiper-item Trigger bindchange event
pagechange: function (e) {
// adopt touch Judge , change tab The subscript value of
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// Get the current index and change it dynamically
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
})
},
onLoad: function (options) {
// Page initialization options Parameters for page Jump
var that = this;
// Highly adaptive
wx.getSystemInfo( {
success: function( res ) {
var clientHeight=res.windowHeight,
clientWidth=res.windowWidth,
rpxR=750/clientWidth;
var calc=clientHeight*rpxR-180;
console.log(calc)
that.setData( {
winHeight: calc
});
}
});
},
onReady: function () {
// Page rendering complete
},
onShow: function () {
// Page shows
},
onHide: function () {
// Page hidden
},
onUnload: function () {
// Page closing
}
})
Change the style to the one below
/* Page switching */
Page {
/* Global style */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* Default color of text */
color: black;
}
.navBox {
/* Top tab Box style */
width: 100%;
height: 80rpx;
background: white;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
/* the last one tab The style of the title */
/* .navBox view:last-child {
padding-left: 20%;
} */
.titleBox {
width: 100rpx;
/* The style of unselected text */
color: rgb(168, 170, 175);
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox,.notLineBox{
/* Check and uncheck the common style of the bottom line */
width: 32rpx;
height: 8rpx;
}
.lineBox {
/* Select the baseline style */
background: rgb(43, 44, 45);
margin-top: 16rpx;
border-radius: 4rpx;
}
.notLineBox {
/* The bottom line style is not selected */
background: transparent;
}
.swiperTtemBox {
/* Bottom content style */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
/* Page switching */
/* mask */
/* pages/index/components/buy/index.wxss */
.flex {
display: flex;
align-items: center;
}
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.empty-box {
flex: 1;
background-color: transparent;
}
/* Content view */
.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 20px 20px 0px 0px;
z-index: 1001;
}
/* modal Button */
.button {
width: 100vw;
padding: 4rpx 20rpx 10rpx 40rpx;
}
.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
border-radius: 50rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: yellowgreen;
opacity: 1;
}
/* Internal switch bar */
.tab-h{
height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{
margin:0 36rpx;display: inline-block;}
.tab-item.active{
color: #4675F9;position: relative;}
.tab-item.active:after{
content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{
width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{
width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{
width: 100%;height: 100%;}
.avatar .doyen{
width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{
font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{
font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{
width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{
margin-top: 80rpx;}
.scoll-h{
height: 100%;}
All complete code
Finally, the complete code is as follows ：
wxml
<!-- Switch -->
<view>
<!-- Tab Layout -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0' style="width: 200rpx;">
<text class="{
{0 == currentIndex ? 'fontColorBox' : ''}}"> Android </text>
<hr class="{
{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1' style="width: 200rpx;">
<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'>
<!-- Android -->
<view >
<scroll-view scroll-x="true" class="tab-h" scroll-left="{
{scrollLeft}}">
<view class="tab-item {
{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav"> hot </view>
<view class="tab-item {
{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav"> Video and sound </view>
<view class="tab-item {
{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav"> read </view>
<view class="tab-item {
{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav"> game </view>
<view class="tab-item {
{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav"> welfare </view>
</scroll-view>
<swiper class="tab-content" current="{
{currentTab}}" duration="300" bindchange="switchTab"
style="height:{
{winHeight}}rpx">
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="https://profile.csdnimg.cn/9/B/A/0_qq_35230125"></image>
</view>
<view class="expertInfo">
<view class="name"> Silhouette Android </view>
<view class="tag">111 People download </view>
<view> This is just a brief introduction , Click for the most details </view>
</view>
<view class="askBtn" bindtap="show_hideModal"> download </view>
<!-- <navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask TA</navigator> -->
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name"> Facial expression </view>
<view class="tag"> Well known emotion bloggers </view>
<view class="answerHistory">134 answer ,2234 People have heard of it </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn"> ask T2A</navigator>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<!-- Android -->
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view> Activity content </view>
</swiper-item>
</swiper>
</view>
<!-- Switch -->
<!-- Popup -->
<!--pages/index/components/buy/index.wxml-->
<view class="box" hidden="{
{!hideModal}}">
<view class="empty-box" bindtap="hideModal" id="empty-box"></view>
<scroll-view scroll-y style="max-height:80vh;">
<view class="content" style="transform:translateY({
{translateY}}px);" animation="{
{animate}}">
<!-- boll -->
<view style="height: 750rpx;display: flex;flex-direction: column;align-items: center;">
<view style="height: 750rpx;width: 700rpx;display: flex;flex-direction: column;align-items: center;padding-top: 10rpx;">
<!-- Icon icon -->
<view style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
<image src="http://pic.2265.com/upload/2017-5/2017515111376293.png" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view style="width: 730rpx;height: 500rpx;">
<text decode="{
{true}}" style="width: 730rpx;height: 400rpx;"> 
    ️️️️️️ 🥳🥳🥳 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 ！</text>
</view>
</view>
</view>
<!-- Button -->
<view class="button" bindtap="confirm">
<view> confirm </view>
</view>
</view>
</scroll-view>
</view>
js
// pages/leftSlide/leftSlide.js
const App = getApp()
Page({
data: {
winHeight:"",// Window height
currentTab:0, // Default the value of the current item
scrollLeft:0, //tab The scroll bar position of the title
currentIndex: 0, // The default is the active item Switch
hideModal:false// mask
},
// Scroll to switch label styles
switchTab:function(e){
let that=this;
that.setData({
currentTab:e.detail.current
});
that.checkCor();
},
// Click the title to switch to the current page to change the style
swichNav:function(e){
var cur=e.target.dataset.current;
console.log(cur);
if(this.data.currentTaB==cur){
return false;}
else{
this.setData({
currentTab:cur
})
}
},
// Judge if the current scrolling is more than one screen , Set up tab Title scroll bar .
checkCor:function(){
if (this.data.currentTab>4){
this.setData({
scrollLeft:300
})
}else{
this.setData({
scrollLeft:0
})
}
},
pagechange: function (ee) {
let that=this;
console.log(ee.detail.source)
if ("touch" === ee.detail.source) {
let currentPageIndex = that.data.currentIndex;
currentPageIndex = (currentPageIndex+1) % 2;
that.setData({
currentIndex: currentPageIndex,
})
}
},
// eject 、 Hide the mask layer
show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})
},
hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
//
// Switch
// Switch swiper-item Trigger bindchange event
pagechange: function (e) {
// adopt touch Judge , change tab The subscript value of
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// Get the current index and change it dynamically
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
})
},
onLoad: function (options) {
// Page initialization options Parameters for page Jump
var that = this;
// Highly adaptive
wx.getSystemInfo( {
success: function( res ) {
var clientHeight=res.windowHeight,
clientWidth=res.windowWidth,
rpxR=750/clientWidth;
var calc=clientHeight*rpxR-180;
console.log(calc)
that.setData( {
winHeight: calc
});
}
});
},
onReady: function () {
// Page rendering complete
},
onShow: function () {
// Page shows
},
onHide: function () {
// Page hidden
},
onUnload: function () {
// Page closing
}
})
cs
/* Page switching */
Page {
/* Global style */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* Default color of text */
color: black;
}
.navBox {
/* Top tab Box style */
width: 100%;
height: 80rpx;
background: white;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
/* the last one tab The style of the title */
/* .navBox view:last-child {
padding-left: 20%;
} */
.titleBox {
width: 100rpx;
/* The style of unselected text */
color: rgb(168, 170, 175);
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox,.notLineBox{
/* Check and uncheck the common style of the bottom line */
width: 32rpx;
height: 8rpx;
}
.lineBox {
/* Select the baseline style */
background: rgb(43, 44, 45);
margin-top: 16rpx;
border-radius: 4rpx;
}
.notLineBox {
/* The bottom line style is not selected */
background: transparent;
}
.swiperTtemBox {
/* Bottom content style */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
/* Page switching */
/* mask */
/* pages/index/components/buy/index.wxss */
.flex {
display: flex;
align-items: center;
}
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.empty-box {
flex: 1;
background-color: transparent;
}
/* Content view */
.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 20px 20px 0px 0px;
z-index: 1001;
}
/* modal Button */
.button {
width: 100vw;
padding: 4rpx 20rpx 10rpx 40rpx;
}
.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
border-radius: 50rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: yellowgreen;
opacity: 1;
}
/* Internal switch bar */
.tab-h{
height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{
margin:0 36rpx;display: inline-block;}
.tab-item.active{
color: #4675F9;position: relative;}
.tab-item.active:after{
content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{
width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{
width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{
width: 100%;height: 100%;}
.avatar .doyen{
width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{
font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{
font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{
width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{
margin-top: 80rpx;}
.scoll-h{
height: 100%;}
summary
That's what we're sharing today ！！
边栏推荐
- 14th test
- **Grafana installation**
- Deep understanding of UDP, TCP
- Can't connect to MySQL server on '(10060) solution summary
- 如何成为一名高级数字 IC 设计工程师（5-2）理论篇：ULP 低功耗设计技术精讲（上）
- JS reverse tutorial second issue - Ape anthropology first question
- H5网页播放器EasyPlayer.js如何实现直播视频实时录像？
- Unity shader (basic concept)
- How to speed up video playback in browser
- EXT2 file system
猜你喜欢
PLC信号处理系列之开关量信号防抖FB
Unity shader (learn more about vertex fragment shaders)
Impression notes finally support the default markdown preview mode
【BW16 应用篇】安信可BW16模组/开发板AT指令实现MQTT通讯
esp8266使用TF卡并读写数据（基于arduino）
Information Security Experiment 2: using x-scanner scanning tool
Unity shader (basic concept)
Binary tree high frequency question type
How does mongodb realize the creation and deletion of databases, the creation of deletion tables, and the addition, deletion, modification and query of data
![[4g/5g/6g topic foundation-146]: Interpretation of white paper on 6G overall vision and potential key technologies-1-overall vision](/img/fd/5e8f74da25d9c5f7bd69dd1cfdcd61.png)
[4g/5g/6g topic foundation-146]: Interpretation of white paper on 6G overall vision and potential key technologies-1-overall vision
随机推荐
Unity shader (learn more about vertex fragment shaders)
Can flycdc use SqlClient to specify mysqlbinlog ID to execute tasks
thinkphp3.2信息泄露
哈夫曼编码压缩文件
高斯消元
洛谷P2482 [SDOI2010]猪国杀
sqlplus乱码问题，求解答
CodeForces - 1324D Pair of Topics（二分或双指针）
Database multi table Association query problem
How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
面试被问到了解哪些开发模型？看这一篇就够了
js逆向教程第二发-猿人学第一题
Gym - 102219j kitchen plates (violent or topological sequence)
印象笔记终于支持默认markdown预览模式
基础篇：带你从头到尾玩转注解
战略合作｜SubQuery 成为章鱼网络浏览器的秘密武器
Difference between process and thread
JS reverse tutorial second issue - Ape anthropology first question
Sqlplus garbled code problem, find the solution
小程序滑动、点击切换简洁UI