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

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

在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='list' wx:if="{{list.length > 0}}"> <block wx:for="{{list}}" wx:key="list"> <view class='list_item' bindtap='toRe…

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

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

<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="container carts-list"> <view wx:key="isshop" wx:for="{{carts}}" class="carts-item" > <view class="carts-c…

// pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '1200.00', sum: '1200.0', selected: true, cid: 1001, }, { teaname: '18年老茶-150g', image: '../../imgs/c…

// 购物车删除 deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; carts.splice(index, 1); // 删除购物车列表里这个商品 this.setData({ carts: carts }); if (!carts.length) { // 如果购物车为空 this.setData({ hasList: false // 修改标识为false,显示购…

效果: 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…

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

效果图 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…

//1,wxss /*外部容器*/ .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; }   /*整体列表*/ .carts-list { display: flex; flex-direction: column; }   /*每行单元格*/ .carts-item { display:…

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

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教…

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/#资源…

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 一:推荐地址集合:(初入门者请先看这里) 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=147643467…

微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"…

微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item">分类</view> <view class="ring"></view> <view class="head_item">价格</view> </view> <block wx:fo…

背景 由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的.更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢? 1.现在微信小程序比较好,用户也比较多:利用微信小程序做推广,效果好: 2.小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除: 3.开发周期与开发难度小于原生app. 技术栈 采用前后端分离 1.Vue全家桶 2.mpvue 3.koa2+mysql 构建过程 1.安装工作 a)安装好node b)安装vue-cl…

微信小程序通讯录 字母排序效果: demo地址:https://github.com/PeachCoder/wechat-contacts…

这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例化一个动画实例(实例代码如下) 先了解基础部分: 在看代码之前要先有个下面的基础了解 1)wx.createAnimation(object) 微信小程序实例化一个动画效果 2)export( ) 这个方法是导出动画数据(传递给animation属性) 3)step( ) 来表示一组动画完成 微信官…

微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题title 2.图片地址 3.数量num 4.价格price  5.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按钮本身也跟随toggle变换 四.点击结…

代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 基本需求 显示图书基本信息:名称.作者.描述.价格.数量. 点击复选框进行toggle操作.当前选中,则变成未选中:当前未选中,则变成选中. 图书数量的加减操作. 根据选中商品进行价格汇总. 全选/全不选. 目录结构 二…

使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始第三篇 上一篇建好了cart.wpy,初始代码结构是这样的: <style lang="less"> </style> <template> <view class="cart"> 这里是购物车呀~ </view&g…

前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ…

前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 原文作者:林鑫,作者博客:https://github.com/lin-xin/blog 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列…

项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄到了破解版微信web开发工具,所以今天正好试试手.由于我是做iOS的,所以对H5和CSS方面不太了解,代码里面写的丑的地方欢迎吐槽. 1.效果演示 WXEXE.gif 2.微信小程序介绍 微信小程序的一个页面主要分成三个部分.js文件.wxml文件和.wxss文件 . js文件.js文件相当于ios…

微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCart:function(e){    var pid = e.currentTarget.id;    var pic = parseFloat(e.currentTarget.dataset.pic);    var cartList=this.data.cartList;    var ex =…

效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle iconfont icon-list' bin…