隐藏滚动条 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 } 自定义滚动条 /*定义

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

注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;"> <view style="width: 25%;margin-bottom: 16upx;" v-for='(items,indexs) in item.t

uniapp小程序迁移到TS 我一直在做的小程序就是 山科小站 也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能都是比较简单的功能,但是这好不容易实习学到的东西得学以致用,那就继续在小程序上动手吧哈哈.这次实习收获最大倒不是怎么迁移到TS,而是一些组件设计的概念以及目录结构设计上的东西,不过这都是在之后重写组件的时候要做的东西了.回到正题,小程序是用uniapp写的,毕竟还是比较熟悉Vue语法的,这次迁移首先

目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小程序适用的Socket类,具体实现如下. 2,代码实现 class webSocketClass { constructor(url, interval) { this.url = url this.data = null this.isCreate = false // WebSocket 是否创

css 隐藏滚动条 ::-webkit-scrollbar { width:; height:; color: transparent; } 自定义滚动条样式 ::-webkit-scrollbar { width: 10rpx; height: 10rpx; color: transparent; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 20rpx rgba(0,0,0,0.3

前言 又很久没有写东西了,上周开始将一个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

Lilishop B2B2C商城系统 官方公众号 & 开源不易,如有帮助请点Star 所有jar包均可从maven中央仓库下载,无二次封装jar包,全端开源,无后门,无监控. 介绍 官网:https://pickmall.cn Lilishop 是一款Java开发,基于SpringBoot的B2B2C多用户商城,前端使用 Vue.uniapp-app开发 系统全端全部代码开源 商城展示端包含 PC.H5.小程序.APP. 商城包含 会员模块.第三方登录模块.第三方支付模块.楼层装修模块.订单模块

前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝).快应用等多个平台. 1.1 软件安装 创建uni-app有两种,一个是通过 HBuilderX 可视化界

目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线,使用无问题. 2,实现代码 定义canvas <canvas canvas-id="imgCanvas" class="imgCanvas" /> canvas样式 .imgCanvas{ position: absolute; top: -100%; w

发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSelectorQuery().in(this) query.selectAll('#id-selector').boundingClientRect() query.exec(function (res) { console.log(res) }) 这时候res里面就能获取到节点信息了

在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> <view class="tarbar"> <view class=".tarbar-list" :style="{ background: tabBar.backgroundColor, color: tabBar.color, 'border-t

通过设置navigationStyle, 即自定义导航实现背景全屏 参考文章:  微信小程序 自定义头部导航栏 navigationStyle 代码部分 在page.json中, 加入 "navigationStyle": "custom" , 这是全局的, 单页面的还不知道怎么搞 "globalStyle": { "navigationBarTextStyle": "black", "navig

1.授权按钮: <view> <button class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button> </view> 2.事件方法: <script> export default { data() { return { nickName: null, //昵称 avatarUrl: null, //头像 isCanUse: uni.g

在pages.json增加如下配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "

<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"> </view> data() { return { flag: 0, text: '', lastX: 0, lastY: 0 } } methods: { handletouchmo

(1)新建组建:编辑器右击 新建组建 (2)传值 <template> <view class="myRankingList"> <block v-for="(item, index) in list" :key="index"> <view> 内容 </view> </block> </view> </template> <script>

在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: 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中触发

准备 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 安

官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 组件视图 #视图API文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161122#视图手机体验https://mp.weixin.qq.com/debug