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

这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动.  (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... 从深圳回来做了一个微信小

微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.datetime}}" wx:for

微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要自己加在view上, <view bindtouchstart='touchStart' bindtouchend="touchEnd"></view> 如果不让滑动事件冒泡的话.将bind改为catch就好了 <view catchtouchstart='t

组件内属性详解   属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.absolute nav-color String transparent 否 导航栏(包含导航栏以及状态栏)背景色 nav-bar-style String default 否 导航栏样式,可取值为default.capsule.capsule-diy.diy nav-bar-title Strin

16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="height:{{height}}px" bindchange="change" current-item-id="{{docid}}" duration="100" > <swiper-item data-key="{{it

//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view><!--正式内容(渐入加深效果)--> <view class="container log-list" style='

一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"red"

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> <view bindtap='switchNotice' class="closeView">x</view> </v

竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view> <view style="background: green; width: 200px; he

效果如图: 也就是实现红色框的部分. wxml代码 <view class="header {{scrollDown?'scrolled':''}}"> <view bindtap="tapsearch" class="search"> <image src="/icon/search.png" /> </view> <view class='tools'> <

效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text> <image src='{{shift}}'></image> </view> <image wx:for="{{head}}" src='{{item.buyer_avatar}}'></image> <view

1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层)  ,其中灰色和红色层大小一样, 白色比灰色的小一个环形. b.通过8个角度百分百分析红色层的剪切点剪切出不同的图形 4.代码 wxml代码: <view class="chart"> <view> <view> <span style="clip-path: po

上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-item { width:33.3%; color:#C7C7CB; font-size:28rpx; display:flex; align-items:center; justify-content:center; display:flex; border-bottom:1rpx solid #D

Wxml代码:<view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected">行业动态</view> <view class="{{selected1?'red':'default'}}" bindt

效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='input-tel' type='number' placeholder="手机号" placeholder-style='color: #000' maxlength='11 c

转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载

前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果,我的侧滑栏需要列出如下信息: 初始状态下,左下角设置悬空按钮 点击悬空按钮,侧边栏拉出,悬空按钮旋转180度 主页内容向右滑动一定比例,并设置阴影遮罩 实现 首先将xml文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮. <!--index.wxml--> <view

在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象 效果: 默认2秒展示,上移动画隐藏 /** * 展示顶部 tip , 多次快速调用,会覆盖前次展示 */ UIComponent.showToptip = function (opt = {}) { var self = this; if (self.uiComponent_topTip_timer) { //如果之前有timer,那么取消后重新创建 cl

微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmove