红框为悬浮 左右可以滑动 效果如下⬇️ 悬浮把最外层position:fixed;top:0;这个时候上面的导航就可以悬浮 但是会出现左右滑动不了的情况 这是因为我没给设置宽度 这个时候我们把包着scroll-view的那个view设置宽度为100%就可以了 .hd { width: 100%; z-index: 1; position: fixed; top: ; background: #fff; border-bottom: 1px solid #eee; border-top: 1px

如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"

要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas canvas-id="myCanvas" class="myCanvas"  disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touc

使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/ wepy官方文档:https://tencent.github.io/wepy/document.html#/ wepy小程序项目初始化:wepy小程序入门之项目初始化 今天的目标是开发微信小程序的底部导航 效果图:

微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:  利用:scroll-into-view 来实现: 效果图:   wxml: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}

具体的情况: 在模拟器中没问题,可是在真机下就出现以下问题,  <textarea  />在一个view盒子中,view盒子是固定定位,页面滑动时候,固定定位的盒子会定在屏幕的相对位置,但是盒子中的textarea组件(字)会跟随页面滑动(组件固定在了相对页面的位置,而非屏幕的相对位置). 解决: 官方文档中有提及-->如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true. 官方文档链接:https://mp.weixin.q

如何切换webview进入小程序请参考https://testerhome.com/topics/12003 脚本思路:进入webview后会存在多个handle同Web页签一样,获取所有的handle,然后在遍历所有的handle,通过switch_to_window进行handle切换,当某个handle可以定位到我们需要定位的元素时,然后我们就可以进行之后的自动化操作了! <code style="font-family:Menlo, Monaco, Consolas, 'Couri

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

近日,在小程序中使用sticky定位实现吸顶效果,不料入了一个大坑. 定位后,距离有position: relative:的上级元素有个1px大小的缝隙条,透过缝隙,滑动时可看到定位标题下的内容. 此bug是在解决兼容时在小米手机上出现的 解决方案: 使用:box-shadow: 0 -1px #fff; 轻松解决定位缝隙的问题. 注意: 看自己的背景色是啥,颜色可自定义.

什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> JS文件代码: 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念

1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时查看页面效果 看小树老师的视频是要点击调试-重新载入才能看页面效果,在开发中发现直接ctrl+s键就可以在左侧查看页面效果 3:审查元素 在google浏览器一般是这个符号查看,但是在微信开发者工具中,点击后仍然无法查看dom树,正确的是点击其后边有一个的符号,这个微信小程序开发专门的调试工具,和谷

2018.3.25 这个时间我觉得更具58页面进行模仿. 微信小程序,标题更改在app.json文件中window属性. window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖.

前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户授权,我们肯定能得到: 但是,后者是需要用户授权,我们才能通过腾讯得到用户的其他信息,比如nickname.avatarUrl.encryptedData.iv等,如果你只需要openid,下面的代码你可以不用看了,下面重点讲解如何 多次调用wx.getUserInfo或者app.getUserIn

目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&wx.navigateBack() 4.router.clear()&wx.reLaunch() 5.项目实践 6.<从微信小程序到鸿蒙js开发>系列文章合集 在项目中,页面之间的路由跳转是十分普遍的.鸿蒙JS开发提供了四种页面跳转的方式(轻量级智能穿戴仅支持replace()),之前的帖子

一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title">横向滚动</view> <scroll-view scroll-x="true" style="height:240px;white-space:nowrap"> <view class="scroll-view-it

页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> <view>哈哈哈哈哈</view> </view> js文件 onLoad: function(options) { //创建节点选择器 var query = wx.createSelectorQuery(); //选择id query.select('#demo').boun

一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =

index.wxml: <view class="slogan"> <text> 建立跨文化的全球视野,做世界公民 </text> </view> index.wxss: .slogan{ padding:19rpx 0; background-color: #39B371; text-align: center; color:#FFFFFF; } .slogan>text{ font-size:20rpx; line-height

hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤