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

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

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

wxml代码

<scroll-view class="recommend_scroll_x_box" scroll-x="true">
      <view class="recommend_hot_box" wx:for="{{hotList}}">
        <image src="{{item.pic}}" class="recommend_hot_image"></image>
      </view>
    </scroll-view>

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代码

<view class={{flag===0？"hide":""}} bindtap="clickMes1">first </view>
<view class={{flag===1？"hide":""}} bindtap="clickMes2">second</view>

WCSS代码

.hide{
    display:none
}

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