侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&

SaveCard: function(e) { let that = this; console.log('保存'); var imgSrc = e.currentTarget.dataset.img; //获取相册授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success()

WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap="quxiaosongjian"> <view>取消送检</view> </view>   当前页面显示为待送检 js中: quxiaosongjian:function(e) { var that = this; var orderstate

用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方法不能写到 methods里 实例生命周期 同 vue,不同的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期,详细的 vue 生命周期文档请看生命周期钩子 beforeCreate created beforeMount mounted beforeUpdate u

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

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

在小程序内点击按钮分享H5网页给好友或者朋友圈 首先需要建立h5容器文件夹 页面.wxml <navigator url="/pages/report-await/fouryearh5share/fouryearh5share"> <button class="sharebutton" open-type="share" ></button > </navigator> 页面.js onShareA

亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 3 4 5 6 7 8 9 .login-btn {     font-size: 16px;     width: 100% !important;     font-weight: 400;     color: #fff;     border-radius: 4px;     border

在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum 但是在openSetting 和 downloadFile 会有坑! openSetting,[打开小程序设置页]有坑,是官方的问题,这里出现授权弹框,如果你点击拒绝再次引导授权流程弹框不会立马弹出(官方解释说因为频繁代用授权会

最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo

又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者长按识别打开相应的小程序. 这个新的二维码,咋一看长得有点像菊花. 小程序有了新二维码,旧的小程序二维码不会失效,继续兼容. 这个小程序码是否有什么隐藏技能呢?大家也不妨推测一下. 「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号. 体验最新房贷计算器:http

如果你发现自己的小程序页面没有返回按钮,请检查是不是用的wx.redirectTo(OBJECT)进行的跳转,如果是那就把它改成wx.navigateTo(OBJECT)就可以了. wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.

作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文件 data: { one:"block", //判断图片全屏前是否隐藏 ones:"none", //判断图片全屏后是否隐藏 phoneheight :" " , //按比例缩放后图片高 phoneWidth : " "  //

<!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}"></view> <view class='rob-box' wx:if="{{showModalStatus}}"> <!-- 待添加商品详情 -->

在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null } }, touchStartHandle(e) { // 单手指缩放开始,也不做任何处理 ) { console.log("单滑了") retur

最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"&g

小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 none;} 另外button的样式, 都是通过button::after伪类来实现的.

有些时候要求下拉按钮需要动画效果,但又不需要引入插件． 这时需要手动写一个动画． 主要思路: 动态切换class 默认与动画转向的样式编写 上图是默认给出的按钮向下的样式, 上图是动画转向后的样式 上图声明动画执行动作 在page实例data对象中声明一个变量,默认给true 然后给图片加个点击事件 这样一来就达到动态切换class的动画效果啦

大致的思路是先给标签input设置一个value <input value="{{value}}" placeholder="最大输入长度10"/> 然后就通过按钮的点击事件来把这个value变成空 setValue:function () { this.setData({ value:"" }) } 还可以直接通过button的 reset属性重置

拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../../../images/icons/zhiwen.svg" /> <view class="footer-r-t"> <text>点击保存到相册</text> <text class="t">享更多优惠&