本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果。分享给大家供大家参考，具体如下： 效果如下：我用了很笨的方法实现的，大致就是： 1.当前点击的div（view）如果前后都有内容，那么，当前div（view）就设置到中间，前一个就设置到左边，前一个的前面所有全部设置到最左边，后面一个设置到右边，后面所有设置到最右边 2.当前点击的div（view）如果前面无内容，即第一个，那么，当前div（view）设置到中间，后面一...
本文实例讲述了微信小程序实现的3d轮播图效果。分享给大家供大家参考，具体如下： 前面写过一篇3d轮播，就是这篇，使用的方法比较笨拙，而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。 先看看效果：wxml： <swiper previous-margin=50px next-margin=50px bindchange="swiperChange" style=height:{{swiperH}};><swiper-item wx:for={{imgList}} wx:key=><image class=le-img {{nowIdx==index?"le-active":""}} ...
本文实例讲述了微信小程序实现两个页面传值的方法。分享给大家供大家参考，具体如下： 需求：发送页面通过url传值，接收页面获取值。 发送页面的js var nowid=10; wx.navigateTo({url: ../index/index?id=+nowid, })或者发送页面用navigate 组件： <navigate url="xxx?id=10"></navigate >如果id是page里面data的数据。是动态的，那么可以写成： <navigate url="xxx?id={{pid}}"></navigate >这种方式也是通过接收页面的onload来获...
本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考，具体如下： 怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY() 属性，给需要动画的元素添加上一个动画class。 先上效果图：1.蒙层的结构： <!-- 购物车蒙层 --> <view class=list-fix wx:if="{{mengShow}}" bindtap=outbtn> <!--mengShow是蒙层是否显示的标志，然后蒙层绑定ou...
好久没跟新博客了 今天没啥事来记录一下我的成果 哈哈哈 今天产品小姐姐过来跟我说改一下产品活动页的样式 我看了一眼发现有个轮播样式两边小中间大 这个我以前是没有写过的 而且在小程序中要实现 觉得应该不是很简单 想着记录一下吧 其实没我想的那么难实现 小程序有个组件轮播组件swiper 这个就可以直接使用 而且他提供了两个属性很实用这个可以帮助实现出现两边部分图片信息的功能 我主要的想法就是给个标识 当滑动到某...
前言 本文主要给大家介绍了关于微信小程序自定义导航的相关内容，详细代码请见github，请点击地址 （本地下载），其中有原生小程序的实现，也有wepy版本的实现了解小程序默认导航如上图所示，微信导航分为两部分，第一个部分为statusBarHeight，刘海屏手机（iPhone X，小米8等）会比其他的手机高很多，第二部分为titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一样的，IOS高度是一样的, 所以我们要实现一个兼容不同手机的导航...
为了吸引更多的用户，设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的，下面分享下我们打卡小程序的一些经验。 分享海报的效果图如下：制作要求： 海报以弹窗形式展现，各种手机型号都可以正常显示海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息海报保存的图片大小为 iphone 6 的两倍图（750 * 1334）由于看到的弹窗图片与保存的图片是两种大小，所以一开始看了些网上的其...
本文实例讲述了微信小程序入门之广告条实现方法。分享给大家供大家参考，具体如下： 在小程序页面，有时候需要弄一条广告条进去，作用可以用来提醒客户端，更加醒目，这种实现很容易，要用到组件swiper,navigator 先上效果图：wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"><block wx:for="{{msgList}}"><navigator url="服务器" open-type="navigate"><swiper-item><view class="swip...
本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考，具体如下： 效果：左右滑动可以切换展示图片 代码： <!--pages/test/test.wxml--> <!-- 组件 --> <swiper><swiper-item wx:for="{{imgUrls}}"><image src={{item}} width="335" height="150" mode=widthFix class=img /></swiper-item> </swiper>pages/test/test.js： Page({data: {imgUrls:[https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D60...
本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考，具体如下： 微信小程序如何通过js操作html的css属性： 在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。 微信小程序中，不能通过这种方式进行操作。 如何在微信小程序中在wxml中操作wxss的属性。 实现思路： 通过利用数据绑定实现动态改变样式， 1、在wxxml标签内嵌css属性上绑定js的date值 2、通过js中绑定css属性的date值改变wxml标...
本文实例讲述了微信小程序dom操作的替代思路。分享给大家供大家参考，具体如下： 微信小程序无法操作dom，这意味着之前js中的各种习惯方法必须换一种思路实现 在尝试了几类情况后，发现部分情况下可以用{{}}变量绑定来实现效果。 比如： 一、实现view的显示和隐藏 在js中的data设置变量 bottomHidden1:"block"； 然后在wxml中的view中设置<view class="bottom1" style="display:{{bottomHidden1}}" > </view>； 在其它我们需要的地...
本文实例讲述了微信小程序之事件交互操作。分享给大家供大家参考，具体如下： 微信小程序—点击事件 什么是事件？ 指点击，触摸，按下，滑动，松开，等一系列对手机屏幕操作。 下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁，在上面显示信息那就显示 点击了谁，点击了多少次，这多少次没有分开啊，次数是点击他两的总和。下面另一代码是分开的，各计各的。1. 在index.wxml 中设置点击事件（测试时需要删除注释部分） ...
最近接到一个私单，需要小程序里面实现指纹验证。。废话不多说，，先查小程序api。 好的，在翻阅小程序api中，发现有一个生物认证的api。分别是wx.checkIsSoterEnrolledInDevice ， wx.checkIsSupportSoterAuthentication 和 wx.startSoterAuthentication。先从checkIsSupportSoterAuthentication说起，文档解释这是获取本机支持的 SOTER 生物认证方式。就是获取你这个手机有什么生物功能。 代码先行: wx.checkIsSupportSoterAuthe...
本文实例讲述了微信小程序模板template简单用法。分享给大家供大家参考，具体如下： 模板呢，就是为了方便你重复写一些代码而建立的，目前我指发现它的功能适合建立一些表格类型的数据， 比如，录入认得信息啥的(都有名字，年龄，性别啥的)1. index.wxml代码 <view class="page"> <template name="aafa"> <view> <text> 姓名：{{name}} 年龄：{{age}}</text></view> </template> //这是模板显示的四种方式，你看你喜欢哪一种 <temp...
本文实例讲述了微信小程序之swiper滑动面板用法。分享给大家供大家参考，具体如下： swiper就是为了以后做轮播图用的。下面是一些它的属性PS：关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.jb51.net/table/wx_component 或官网https://developers.weixin.qq.com/miniprogram/dev/component/ 1.首先新建一个page（记得在app.json中注册），上效果图。2.index.wxml中的代码 <swiper class="view-item" ind...