隐藏滚动条 1.全局隐藏滚动条,在app.vue中 ::-webkit-scrollbar{ display: none; } 2.局部隐藏藏滚动条 样式没有使用scoped属性时, 否则无效. .uni-scroll-view::-webkit-scrollbar { display: none } 使用scoped属性时, 就要使用/deep/穿透. /deep/.uni-scroll-view::-webkit-scrollbar { display: none } 自定义滚动条 /*定义

开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的. 网上看了好多,写的.都评论有起作用或者不起作用的. 我在这分享一个全局隐藏滚动条的方式. 样式代码我们在app.wxss中,写一个类选择器: .contain { height: 100vh; width: 100vw; padding: 0; margin: 0; background-color: #F2F5FF; overflow-y: scroll; } /* 不显示滚动条 */

看了许多网上教程说是添加如下样式可以解决,我加入到组件wxss中无效,加入全局wxss生效. 添加css代码如下: ::-webkit-scrollbar { ; ; color: transparent; }

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

全局wxss中添加以下样式,可以隐藏所有的滚动条: 包括使用scroll-view组件或者使用overflow-y:scroll;而出现的滚动条: 无论竖向横向滚动条都可隐藏: ::-webkit-scrollbar { width: ; height: ; color: transparent; }

css代码: .father{ //父元素 width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: auto; } //隐藏滚动条 ::-webkit-scrollbar { width: ; height: ; color: transparent; display: none; }

官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本不进行换行 display: inline-block; ----应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性 .bc_green {background: green;width:100px; height: 100px;} .bc_red {backg

scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主要属性: 使用演示: wxml <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px"> <view style="background: r

::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } 父级元素(滚动的元素) width:100%; overflow-x: hidden; overflow-y: auto;

在wxss文件上加上 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }

前言 又很久没有写东西了,上周开始将一个APP和一个网站的内容整合到微信小程序中,到这会儿终于搞得快结束了,才发现为啥我的小程序滚动视图没有滚动条,这是闹哪样,没有滚动条的滚动是没有灵魂的. 客官可移步http://fanjiajia.cn/2019/07/02/wxxcx/flx1/本文若有出入,请指正--来自小渣渣的颤抖 原因 原来在app.wxss中定义了如下的内容[不知道是不是新建项目自动生成的,这里也就提供了隐藏滚动条的思路啦] ::-webkit-scrollbar { width:

wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现. 所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁. 如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多. wxml: <view> <text>page

微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: block; } .js: data: { showOrHidden:true, //判断显示与否的,true表示显示,反之隐藏 }, 简洁的方式,利用wx:if的方式 .wxml: <view wx:

在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’:’hidden’}}’ 2.再在相对应的js中配置show的值,例 data: {show:1,} 3.最后在相对应的css中定义 .hidden{display:none;} 简单办法 直接在元素中加入wx:if=”{{is_open !=”}}”代码,后台传到前端的is_open为1时,元素就

小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的  wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager() https://developers.weixin.qq.com/miniprogram/dev/api/getBackg

条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:elseif和wx.else,这几个组合起来,可以使条件渲染更加灵活. 在这里官方文档中提到了一个wx:if和hidd

微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view class="header"> <view class="nav_i"> <text class="nav_tex">更多内容</text> </view> <view class="n

微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最普遍的方法 <block wx:for="{{time}}" wx:key="item" data-index="{{index}}"> <view class="bottomLine" hidden='{{in

在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web API基础的.完成这些基础准备和布局后,我们继续将技术的触角放到使用Vue语言开发小程序的场景中,本篇随笔介绍使用uView UI+UniApp开发微信小程序,介绍使用准备过程中的一些注意点和经验总结. 1.小程序的开发准备工作 我们在开发小程序之前,需要了解一些基本的知识,以及掌握一些常规的开发工具,相关知

在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔详细介绍一下微信小程序的相关登录处理以及登录后设置用户身份信息,并跳转到相应页面的处理过程. 1.令牌判断和登录方式 在之前介绍过,在业务系统中,我们需要根据登录用户的身份获取对应的数据,如果用户没有登录,这些信息是无法获到的,那么我们可以在app.vue中判断用户是否登录,然后跳转到对应的页面,如下所示.

在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验证码登录处理的一些经验,本篇随笔继续介绍第三种登录方式,微信授权登录.微信授权登录是系统用户表绑定了微信小程序OpenID后,通过前端发起微信的登录授权,顺利获得微信授权后获得code,并在我们自己的服务后台接口通过code解析出用户的OpenId,然后获得对应用户的身份token信息返回给前端,前端完成登录