微信小程序控制盒子显示隐藏_微信小程序 显示隐藏view元素、滚动条的方法

最近在各大论坛里，看到很多人在问“微信小程序显示隐藏view元素和滚动条”等相关问题，作为一名微信小程序开(tian)发(keng)者(ren)，今天就在这里为大家分享，如何显示隐藏微信小程序的view元素和滚动条吧，希望能够帮助大家，对大家有所启发。

1. 微信小程序-横向滑动scroll-view隐藏滚动条

滚动条指的是scroll-view中的滚动条

wxml代码

wxss代码

.recommend_scroll_x_box {

height: 245rpx;

white-space: nowrap;

display: flex;

}

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

.recommend_hot_box {

width: 230rpx;

height: 245rpx;

margin-right: 24rpx;

display: inline-block;

}

.recommend_hot_image {

width: 230rpx;

height: 143rpx;

}

js代码

Page({

data: {

hotList: [

{

pic: '/images/example2.png',

title: '玻璃棧道',

desc: '22W人去過'

}, {

pic: '/images/example2.png',

title: '玻璃棧道',

desc: '22W人去過'

}, {

pic: '/images/example2.png',

title: '玻璃棧道',

desc: '22W人去過'

}, {

pic: '/images/example2.png',

title: '玻璃棧道',

desc: '22W人去過'

}, {

pic: '/images/example2.png',

title: '玻璃棧道',

desc: '22W人去過'

}

]

}

2. 小程序实现局部元素隐藏

原理：这里主要通过在设置标志来让局部进行隐藏或者切换。下面的代码主要是功能是：单击first第一个view隐藏，第二个展示。单击second第二个view隐藏，第一个展示。

JS代码

Page({

data:{

flag:0

},

clickMes1: function(){

falg=1

} ，

clickMes2: function(){

falg=1

}

})

WXML代码

first

second

WCSS代码

.hide{

display:none

}

仅仅只剩5天，微信小程序就要发布了，程序员同胞，还在忙着填坑，加油~