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

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

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

在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事件,无法在scroll-view中触发…

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…

这几天在做一个微信小程序注册登录页面的时候碰到一个问题,就是使用wx.request api的时候success中返回的JSON数据前面会多出空白字符,后面网上查了一下是说php bom头问题(详细介绍可以自行网上搜一下),按照这个思路找了一下,发现原来是php后台在对wx.getUserinfo 中 encryptedData加密数据进行解密时,调用了微信封装好的类,该类的php文件编码格式为,后面用Editplus编辑器将其改为   至此问题解决.如果不改编码的话,还有一种解决办法,就是在小…

在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视频的播放与暂停 true => 本次问播放 false => 本次为暂停 每次点击后,更新data中视频的id值 声明一个数组,用于存放播放视频的id和播放时间 { vid:xxx, currentTime:xxx } 事件的流程图 代码实现: 静态 <!-- 使用scroll-view组件…

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5…

写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下效果图吧,能够实现点击切换,tab菜单部分可以实现左右滚动 好了,看一下我的源码吧!<喜欢的话拿走不谢哟> 1.wxml <!-- tab header --> <scroll-view scroll-x="true" class="tab-h&qu…

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源…

写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助 实例1:滚动tab选项卡 先看一下效果图吧,能够点击菜单或滑动页面切换,tab菜单部分可以实现左右滚动 好了,看一下我的源码吧!<喜欢的话拿走不谢哟> 1.wxml <!-- tab header --> <scroll-view scroll-x="true" class="tab…

微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swiper高度为100vh,这时会产生css3滚动条,隐藏掉swiper-item::-webkit-scrollbar 即可. 详情示例见:https://www.cnblogs.com/cisum/p/10443412.html 1 swiper { 2 width: 100%; 3 height: 1…

//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面 一.PC端 /* *<div class='topicBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documen…

“锚点”功能在实际应用设计的好,可以提高用户体验.今天碰到一个类似下面功能: 由于页面数据比较多,除了做些上拉加载,下拉刷新等优化.还可以进行进行分类,如上图.功能要求:点击导航的菜单,相应页面的分类内容滑动到页面顶部.由于微信小程序页面无dom操作,改功能改如何操作呢? 一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了. 后发现 scroll-vie…

一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pages”:[ //配置目录信息 “pages/index/index”, //第一条即是程序启动的首页 “pages/logs/logs” ], “window”:{ //窗口样式 “backgroundTextStyle”:”Light”, “navigationBackgroundColor:”#…

一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2.解决方法 在微信小程序的全局css样式(app.wxss)中加入特定代码: ::-webkit-scrollbar { //宽度为0 width: 0; //高度为0 height: 0; //颜色为透明 color: transparent; } 3.示例代码 二.微信小程序fixed定位下sc…

微信小程序中scroll-view的几个坑 1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-flex).所以只能给你的scroll-view设置如下 overflow: hidden; white-space: nowrap; 2:隐藏滚动条,加如下css ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 上边这段代…

scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件 scroll-top Number 设置竖…

1.发送请求 2.云函数中发送请求,例子request https://github.com/request/request-promise    创建云函数movielist,右键在终端打开,输入  npm   install --save request 然后输入 npm   install --save request-promise,当前云函数的package.json文件依赖为 使用 在云函数movielist的index.js中引入包 // 云函数入口文件 const cloud =…

这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具,如上图.点击添加项目,会出现新建项目页面,如下图: 其中AppID随意填写.ps:正式开发了估计有要求的.填写项目名称并选择保存的路径,添加项目就ok了. 就这样,一个hello world 就OK了. 好了,我们现在开始讲解微信小程序的组件. 先倒入官方流出的demo文件.可以到微信小程序开发群:…

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 日报详情页 底部工具栏 评论页面 日报详情页 日报的内容也是最难做的,因为接口返回的内容是html-,天呀,是html…

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结…

微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能,该如何实现了?我们先来看看小程序的技术特点. ## 小程序的特点1. 跨平台,微信就像JRE,在不同操作系统上都有实现,所以微信上的小程序就像运行在JRE上的java程序,从而实现跨平台.另外解决了多平台多机型的适配问题. 2. 体验好,webview加载html是最容易的跨平台方式,但是在手机上…

准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 安装开发环境 下载地址 Windows 64位 Windows 32位 macOS 安…