小程序——scroll-view 页面不滚动与隐藏导航条

1、隐藏导航条，只要在该页面的 wxss 页中加入以下代码就可以

::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}

2、页面不滚动的解决办法
1、原因：我所碰到的 2 次页面不滚动都是因为 scroll-view 的宽度不对。
scroll-view 的宽度应该是你设置的滚动区域的宽度，而实际上很容易就变成内部内容所撑开的全部宽度，在此，给 scroll-view 的父级 view 设置成你需要的可视区域的宽度，scroll-view 宽度设置 100%，这样问题就解决了。
2、示例代码：

<!-- wxml -->
<view style="width:280px"><scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}"><view id="green" class="scroll-view-item_H bc_green"></view><view id="red"  class="scroll-view-item_H bc_red"></view><view id="yellow" class="scroll-view-item_H bc_yellow"></view><view id="blue" class="scroll-view-item_H bc_blue"></view></scroll-view>
</view>
/* wxss */
.scroll-view_H{white-space: nowrap;
}
.scroll-view-item_H{display: inline-block;width: 200px;height: 100px;
}
.bc_green{background-color: green;
}
.bc_red{background-color: red;
}
.bc_yellow{background-color: yellow;
}
.bc_blue{background-color: blue;
}

结果：

小程序——scroll-view 页面不滚动与隐藏导航条相关推荐

小程序scroll设置（滚动轴样式、真机测试不能滑动）
一.先说scroll真机测试不能滑动的问题 1.我做的项目是公司的一个小程序商城.产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求.要不是因为她比我重,我早就打她了.我本来已经做好了一个点击购 ...
小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现一.获取视频的分辨率.时长.缩略图微信小程序提供了三种方式可以获取视频的分辨率.时长: wx.getVideoInfo(Object) :只能用 ...
【微信小程序】各种页面特效链接！
微信小程序:各种页面特效链接! 1.文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果: h ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
小程序用户协议页面实现
小程序用户协议页面设计思路新增用户协议页面首页加载(onLoad())的时候,检查是否已经同意过,没有的话则弹出用户协议界面.点击详情跳转到用户协议页面(使用wx.navigateTo) 用户点击 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...

小程序——scroll-view 页面不滚动与隐藏导航条

小程序——scroll-view 页面不滚动与隐藏导航条相关推荐

最新文章

热门文章