首先需要在lib目录中添加weui.wxss.searchbar和navbar结合主要解决两者的层次问题,即搜索框输入时,下方的检索结果能够覆盖住navbar.下面就开始发码啦: (1)wxml部分: <view class="page"> <view> <view class="page__bd"> <view class="weui-search-bar"> <view class=&qu

代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户预约 时间可选 预约类型更具需求可自定义 2.案例目录结构 二.程序实现步骤: 1.预约index.wxml代码 <!--index.wxml--> <view class=&quo

原文链接:https://mp.weixin.qq.com/s/23wPVFUGY-lsTiQBtUdhXA 1 概述 由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框.今天我们就分享这样的小教程.希望对大家有所帮助. 不多说了,二当家要上图来啦!    css rpx;  ;  ;  ;  rpx;  ;  ;  rpx rpx;  rpx;}rpx;  rpx;  rpx rpx;}rpx

<template> <div> <a @click="isShow">half-screen-dialog</a> <!--BEGIN half-screen-dialog--> <!-- mpvue微信小程序不支持vue中的transition --> <div v-if="show"> <div class="weui-mask" @click=&qu

最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建,npm包名为weui-miniprogram 但是注意!!!如果使用扩展组件的话必须使用npm的安装方式安装weui 以使用tabs选项卡组件为例子 第一步 进入你的小程序根目录下(带app.json的目录)初始化npm   这步的意思是让当前文件夹以nod

1.git下载,找到dist文件: https://github.com/wechat-miniprogram/weui-miniprogram 2.把dist文件中的style复制到根目录 app.wxss引入这个文件 @import '/style/weui.wxss'; 3.dist文件中example目录复制到根文件,(里面是设置相关的代码,直接复制出来使用) 4.app.json把需要引用的文件引到里面 "pages": [ //比如使用button,把他引入 "e

toast toast为消息提示框,无按钮,如需关闭弹框可以添加事件设置hidden为true,在弹框显示后经过duration指定的时间后触发bindchange绑定的函数. 官方文档 .wxml <view> <toast hidden="{{hidden}}" duration="2500" bindchange="open" bindtap="close"> 内容 </toast>

原文地址 <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <bu

1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <butt

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动. 解决方法: 在弹出层加上 catchtouchmove 事件 两种方法:(在电脑上测试是没有用的,这是触摸事件.因此,需要在手机端测试,预览生成一个开发版,用手机微信扫描即可看到效果) 1. wxml: <!-- 首页弹窗 --> <view class='Popup' hidden='{{bool}}' catchtouchmove="test"> js: test:function(){

wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view> </view> <

action-sheet:从屏幕底部弹出一个菜单,选择: 使用的时候,在给不同的 action-sheet-item 添加不同的事件. 效果: (这里的确定可以有多个) 代码: <button type="primary" bindtap="btnclick">按钮</button> <action-sheet hidden="{{onOff}}"> <action-sheet-item class='i

toast:是用于进行提示用户的: 效果: 代码: <toast hidden="{{onOff}}" duration="1000" bindchange="clickTap" >默认</toast> 注意:在上面设置了 duration :但是时间到了也不会消失.原因这里的消失需要改的是 hidden=“true” .这里只是时间到了会去触发 bindchange 事件. 所以:需要在 bindtap 里面设置让这个消

一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 40rpx; /* 背景的宽 */ height: 40rpx; /* 背景的高 */ } /* 这里如果不能修改背景颜色,在选中后的样式中添加background-color */ /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ checkbox .wx-check

在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{{inputVal}}"  bindinput="inputTyping" bindconfirm="search" /> bindconfirm  即为回车事件,为它绑定上需要触发的事件.search是对应的搜索方法.

前言 经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版 本文档主要介绍该小程序在开发中所用到的技术,已经在开发中遇到问题的采取的解决方法 原文链接(转载请注明出处):微信小程序:出发吧一起 开源地址 小程序简介 "让兴趣不再孤单,让爱好不再流浪" 是微信小程序<出发吧一起>的主题,这款小程序旨在解决当代大学生在校园生活中的孤独感,让大家找到志同道合的朋友,在跑步.健身.竞赛等活动中

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5

近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GET! 优质微信小程序 - 环球小镇 移动端商城客户端 掘金微信小程序:收藏集.排名简单示例 微信小程序-像素鸟游戏 微信小程序-百度音乐播放器 场地派微信小程序demo 微信精品小程序-仿找事吧app附近三公里 一个精品微信小程序-petty妈咪 微信小程序todolist 4个页面 一个音乐播放器

| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程序 UI 库 | | | | | | wx-charts ★449 - 微信小程序图表工具 | | | | | | Wa-UI ★164 - 针对微信小程序整合的一套UI库 | | | | | | wux ★163 - 微信小程序自定义组件 | | | | | | wemark ★161 - 微信小