微信小程序基础之交互操作控件
好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单、AlertAction提示框、SuccessAction完成框、LoadingAction加载框,不做详细说明,自己研究,不喜勿喷~~
效果图:(下载记得帮我点star,谢谢~~,源码:https://github.com/hbblzjy/WX-Demo5)
相关代码:
<!--pages/index/Component/ActionSheet/ActionSheet.wxml-->
<view class="viewTitle">
<text class="view-Name">ActionSheet上拉菜单</text>
<view class="lineView"></view>
</view>
<view class="page">
<view class="section section_gap">
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
</view>
</view>
<!--pages/index/Component/AlertAction/AlertAction.wxml-->
<view class="viewTitle">
<text class="view-Name">AlertAction提示框</text>
<view class="lineView"></view>
</view>
<view class="page">
<view class="page__bd">
<modal title="温馨提示" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="modalChange" bindcancel="modalChange">
插入你提醒的信息内容
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
<view> 没有标题没有取消的对话框 </view>
<view> 可以自定义提示框 </view>
</modal>
<view class="viewName">
<button type="default" bindtap="modalTap">点击弹出提示框</button>
</view>
<view class="viewName">
<button type="default" bindtap="modalTap2">点击弹出提示框</button>
</view>
</view>
</view>
<!--pages/index/Component/LoadingAction/LoadingAction.wxml-->
<view class="viewTitle">
<text class="view-Name">LoadingAction加载框</text>
<view class="lineView"></view>
</view>
<view class="page">
<view class="viewName">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>
</view>
</view>
<!--pages/index/Component/SuccessAction/SuccessAction.wxml-->
<view class="viewTitle">
<text class="view-Name">SuccessAction完成框</text>
<view class="lineView"></view>
</view>
<view class="page">
<view class="viewName">
<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
默认
</toast>
<button type="default" bindtap="toast1Tap">点击弹出默认完成</button>
</view>
<view class="viewName">
<toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
自定义消失时间
</toast>
<button type="default" bindtap="toast2Tap">点击弹出自定义消失时间的完成</button>
</view>
</view>
微信小程序基础之交互操作控件的更多相关文章
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...
- 微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
- 微信小程序基础
前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序基础之试图控件View、ScrollView、Swiper
今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...
- 微信小程序基础知识
一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...
- 微信小程序基础入门
准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...
- 微信小程序基础之创建使用教程
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取 ...
随机推荐
- 学习HTML的第一次课
1.母板中的标签的含义 1.1< Doctype html/ > 声明文档类型为HTML 1.2< meta charset="UTF-8"/ > 设当前网 ...
- windows汇编环境配置
原文地址 软件下载 需要的软件已经打包,包括dosbox和MASM.如果没有这两个软件可以在下面的地址下载. http://hjwblog.com/game/汇编环境.zip 点击下载 安装dosbo ...
- vector数组中STL习惯性用法
参考:https://blog.csdn.net/lcamisak/article/details/79358060
- 将python代码打印成pdf
将python代码打印成pdf,打印出来很丑,完全不能看. mac下:pycharm 编辑器有print的功能,但是会提示: Error: No print service found. 所以需要一个 ...
- Bootstrap中关闭第二个模态框时出现的问题和解决办法
Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...
- Python 爬取猫眼电影最受期待榜
主要爬取猫眼电影最受期待榜的电影排名.图片链接.名称.主演.上映时间. 思路:1.定义一个获取网页源代码的函数: 2.定义一个解析网页源代码的函数: 3.定义一个将解析的数据保存为本地文件的函数: ...
- [HNOI 2010]Bounce 弹飞绵羊
Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...
- [APIO2016]划艇
题目描述 在首尔城中,汉江横贯东西.在汉江的北岸,从西向东星星点点地分布着 NNN 个划艇学校,编号依次为 111 到 NNN.每个学校都拥有若干艘划艇.同一所学校的所有划艇颜色相同,不同的学校的划艇 ...
- [Codeforces]856C - Eleventh Birthday
题目大意:给出n个数,问有多少种排列把数字接起来是11的倍数.(n<=2000) 做法:一个数后面接一个数等同于乘上10的若干次幂然后加上这个数,10模11等于-1,所以10的若干次幂是-1或1 ...
- 【bzoj3173-最长上升子序列-一题两解】
这道题不就是简单的DP吗,BZOJ在水我!不,你是错的. ·本题特点: 不断向不同位置插入数字(按数字1,2,3,4,5,6……),需要求出每一次插入后的最长上升子序列. ·分析 ...