微信小程序之左右布局的实现代码
本文以一个简单的小例子，简述在微信小程序开发中左右布局功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，仅供学习分享使用。概述在微信小程序开发中，左右分栏（左边显示分类，右边显示明细，然后进行联动）是一种常见的布局方式，多应用于点餐，冷饮店，外卖，...
2024-01-10微信小程序自定义导航栏实例代码
背景在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题：Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果左上角的事件无法监听、定制路由导航单一，只能够返回上一页，深层级页面的返回不够...
2024-01-10微信小程序 搜索框组件代码实例
这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下search.wxml<view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm...
2024-01-10微信小程序 弹窗自定义实例代码
微信小程序 弹窗首先wxml代码：<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view><view bindtap="clickArea">点击此处</view> 注：hidden属性用于切换比较频繁的地方。wxss代码设置弹窗样式:.myToast{ width:240rpx; height:130rpx; line-height: 130rpx; margin:80rpx 35%; border-radius:20rpx; backgrou...
2024-01-10微信小程序“摇一摇”的实例代码
微信小程序并没有提供摇一摇API接口，但是提供了一个重力感应的API 「wx.onAccelerometerChange(CALLBACK)」，我们可以用这个方法来模拟微信摇一摇功能，代码如下：Page({ onShow: function () { wx.onAccelerometerChange(function (e) { console.log(e.x) console.log(e.y) console.log(e.z) if (e.x > 1 && ...
2024-01-10微信小程序 倒计时组件实现代码
功能: 适用于电商应用的限时团购、商品秒杀等先来看下最终效果：git源：http://git.oschina.net/dotton/CountDown分步骤-性子急的朋友，可以直接看最后那段代码。wxml文件放个text<text>second: {{second}} micro second:{{micro_second}}</text>在js文件中调用function countdown(that) { var second = that.data.second if (second == 0) { ...
2024-01-10微信小程序实现禁止分享代码实例
这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信禁止分享添加以下代码到网页中即可<script> document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API隐藏右...
2024-01-10微信小程序进入广告实现代码实例
这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下<view class="container"> <image src="../../imgs/swiper1.jpg"></image> <text bindtap="cliadv">跳过广告 {{miao}}</text></view>.container{ width:100%;...
2024-01-10微信小程序中显示倒计时代码实例
wxml文件中： <!--倒计时 --> <view class="countDownTimeView countDownAllView" > <view class="voteText countDownTimeText">{{countDownDay}}天</view> <view class="voteText countDownTimeText">{{countDownHour}}时</view> <view class="voteText countDownTimeText">{{c...
2024-01-10微信小程序拖拽排序列表的示例代码
拖拽排序列表思路界面分为两层：底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现）顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。事件主要监听：longpress , touchmove , touchend 三个事件longpress保障长按才有效，并设定许多其...
2024-01-10微信小程序 确认框的实现（附代码）
效果图如下:核心代码如下:delType:function(e){ var typeId = e.currentTarget.dataset['id']; console.log("delete:"+typeId) wx.showModal({ title: '提示', content: '确认要删除该支出类型?', success: function (res) { if (res.confirm) { console.log('用户点击确定') wx.request({ u...
2024-01-10微信小程序实现图片懒加载的示例代码
本文主要介绍微信小程序的模拟图片懒加载，实现的原理是通过页面预加载图片（默认图），加载完成后再显示出来原图，而非真正意义上的懒加载（跟web的懒加载还有很大的差距），只是借此提高用户体验度。多图片懒加载1.xml页面<block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in'...
2024-01-10微信小程序-滚动消息通知的实例代码
写在前面： 这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。（需要注意的是：只要你的swiper存在vertical属性，无论你给值为true或者false或...
2024-01-10微信小程序实现发微博功能的示例代码
跳转页面发状态消息，是一个很常见的功能，功能截图如下：具体实现，这个功能涉及到了page传递参数功能，那么今天就仔细探究一下如何实现首先，这个功能涉及两个页面，分别为top和list先看list页面，即图片1和图片4，该页面的布局如下<!--pages/weibo/list/list.wxml--><view>这是第一条微博</view><view ...
2024-01-10微信小程序自定义toast的实现代码
今天写微信小程序突然发现一个尴尬的问题，请求报错需要提示，就去小程序API里找，可悲的小程序的toast并不能满足我的需求，原生提供的方法调用如下wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true})下面是官方API的说明可以看到支持的图标只有两种，连基本的warning和error都没有，...
2024-01-10微信小程序使用车牌号输入法的示例代码
在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^1.效果图2.相关代码使用组件形式实现键盘输入组件代码index.wxml<view class="carPlate" wx:if="{{s...
2024-01-10微信小程序 引用其他js文件实现代码
微信小程序如何引用其他js文件1.我们先建立一个common.js文件，在common.js编写我们的程序，function myfunc() {console.log("myfunc....");}module.exports.myfunc = myfunc; 这样暴露接口，这里不暴露是不能引用的，在文件域js内var common = require("../../common.js");去链接过来，光链接过来还不行！ var app;var common = re...
2024-01-10微信小程序之裁剪图片成圆形的实现代码
前言最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形，也在github上看了一些例子，一般剪裁图片用的都是方形，所以自己打算写一个小组件，可以把图片剪裁成圆形，主要思路就是使用canvas绘图，把剪裁的图片绘制成圆形，另外剪裁图片的窗口还可以移...
2024-01-10微信小程序开发之左右分栏效果的实例代码
本文以一个简单的小例子，简述在微信小程序开发中左右分栏功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，属于初级入门内容，仅供学习分享使用。概述在微信小程序开发中，左右分栏（左边显示分类，右边显示明细，然后进行联动）是一种常见的布局方式，多应用于点...
2024-01-10微信小程序中实现手指缩放图片的示例代码
公司开发微信小程序，pm想实现如下需求：用手指缩放图片。其实在实现这个需求以前，并不知道，微信公众号以及微信小程序里面有一个原生的api就自带这个特效，而且微信朋友圈也是用的这个api。wx.previewImage，就是它。预览图片。除了不能预览开发环境的本地电脑的图片外，你手机真机的图片，...
2024-01-10微信小程序三级联动地址选择器的实例代码
本文介绍了微信小程序三级联动地址选择器的实例代码，分享给大家，有需要的可以一起了解一下在一些电商类的小程序中，地址选择这个功能一般是必备的，一般的收货信息都需要有一个能选择省市县的控件，当然也有些人为了省事就直接写了一个供输入的input，那么这样做的缺点不言而喻，而且用...
2024-01-10微信小程序 toast 详解及实例代码
微信小程序 开发文档，相关文章：微信小程序 action-sheet微信小程序 modal微信小程序 toast 微信小程序 loading微信小程序 toast消息提示框属性名类型默认值说明durationFloat1500hidden设置false后，触发bindchange的延时，单位毫秒hiddenBooleanfalse是否隐藏bindchangeEventHandle duration延时后...
2024-01-10微信小程序动态添加view组件的实例代码
在web中，我们动态添加DOM，可以用jQuery的方法，很简单。在微信小程序中怎么实现下面这么需求。其中，里程数代表上一行到这一行地方的距离（这个不重要）；要实现的就是点击增加途径地，就多一行，删除途径地，就少一行。分析：添加的和删除的是同样的结构，只是数量不一样，所以考虑循环...
2024-01-10微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块，通过滑块可控制音频播放进度，下面即用代码实现。解决方案首先用.wxml与 .wmss 代码实现进度条的效果，再通过 .js 文件控制进度条的进度和进度条的时间显示。.wxml中(播放进度结构的代码)：<view class="content-play-progress"><text>{{play.currentTime}}...
2024-01-10微信小程序实现卡片左右滑动效果的示例代码
快放假了，人狠话不多，啥也不说了。先看效果图。 思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。卡片滑动的时候有一定的加速度。如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。看到这样的需求，不熟悉小...
2024-01-10
