当前位置:网站首页>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 !!
边栏推荐
- 细说Mysql MVCC多版本控制
- 软件建模与分析
- Oracle安装增强功能出错
- How does mongodb realize the creation and deletion of databases, the creation of deletion tables, and the addition, deletion, modification and query of data
- Octopus future star won a reward of 250000 US dollars | Octopus accelerator 2022 summer entrepreneurship camp came to a successful conclusion
- sqlplus乱码问题,求解答
- Upload taro pictures to Base64
- scrapy爬虫mysql,Django等
- JS inheritance prototype
- esp8266使用TF卡并读写数据(基于arduino)
猜你喜欢
【frida实战】“一行”代码教你获取WeGame平台中所有的lua脚本
Octopus future star won a reward of 250000 US dollars | Octopus accelerator 2022 summer entrepreneurship camp came to a successful conclusion
Switching value signal anti shake FB of PLC signal processing series
Strategic cooperation subquery becomes the secret weapon of Octopus web browser
软件建模与分析
H5网页播放器EasyPlayer.js如何实现直播视频实时录像?
How will fashion brands enter the meta universe?
Netease cloud wechat applet
flex弹性布局
Esp8266 uses TF card and reads and writes data (based on Arduino)
随机推荐
iNFTnews | 时尚品牌将以什么方式进入元宇宙?
JS inheritance prototype
IIS redirection redirection appears eurl axd
印象笔记终于支持默认markdown预览模式
**grafana安装**
数据库多表关联查询问题
[4g/5g/6g topic foundation -147]: Interpretation of the white paper on 6G's overall vision and potential key technologies -2-6g's macro driving force for development
进程和线程的区别
How does mongodb realize the creation and deletion of databases, the creation of deletion tables, and the addition, deletion, modification and query of data
JS reverse tutorial second issue - Ape anthropology first question
2020浙江省赛
Elaborate on MySQL mvcc multi version control
Dynamics 365online applicationuser creation method change
flex弹性布局
12、 Sort
Main (argc, *argv[]) details
Netease Cloud Wechat applet
Flex flexible layout
ViewPager2和VIewPager的区别以及ViewPager2实现轮播图
其实特简单,教你轻松实现酷炫的数据可视化大屏