当前位置：网站首页>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 ！！
边栏推荐
- Gym - 102219J Kitchen Plates（暴力或拓扑序列）
- Sqlplus garbled code problem, find the solution
- H5 web player easyplayer How does JS realize live video real-time recording?
- 战略合作｜SubQuery 成为章鱼网络浏览器的秘密武器
- Difference between process and thread
- 根据热门面试题分析Android事件分发机制(一）
- Flex flexible layout
- La différence entre viewpager 2 et viewpager et la mise en œuvre de la rotation viewpager 2
- flinkcdc 用sqlclient可以指定mysqlbinlog id执行任务吗
- VSCode+mingw64+cmake
猜你喜欢
Information Security Experiment 1: implementation of DES encryption algorithm
Oracle installation enhancements error
Arthas simple instructions
JS reverse tutorial second issue - Ape anthropology first question
4、 Fundamentals of machine learning
js逆向教程第二发-猿人学第一题
Dynamics 365online applicationuser creation method change
Flex flexible layout
flex弹性布局
H5 web player easyplayer How does JS realize live video real-time recording?
随机推荐
PostgreSQL创建触发器的时候报错，
如何成为一名高级数字 IC 设计工程师（1-6）Verilog 编码语法篇：经典数字 IC 设计
nlohmann json
第十四次试验
**grafana安装**
[4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
**Grafana installation**
[Frida practice] "one line" code teaches you to obtain all Lua scripts in wegame platform
软件建模与分析
小程序滑动、点击切换简洁UI
Information Security Experiment 3: the use of PGP email encryption software
How to speed up video playback in browser
網易雲微信小程序
How to become a senior digital IC Design Engineer (5-3) theory: ULP low power design technology (Part 2)
如何使用clipboard.js库实现复制剪切功能
Sqlplus garbled code problem, find the solution
JS inheritance prototype
Communication mode between processes
农牧业未来发展蓝图--垂直农业+人造肉
洛谷P2482 [SDOI2010]猪国杀