微信小程序基础之交互操作控件
2017-01-05 16:11
489 查看
好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括: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>
效果图:(下载记得帮我点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>
相关文章推荐
- 微信小程序基础之交互操作控件
- 微信小程序基础之试图控件View、ScrollView、Swiper
- 微信小程序基础之常用控件text、icon、progress、button、navigator
- 微信小程序基础之试图控件View、ScrollView、Swiper
- 微信小程序基础之常用控件text、icon、progress、button、navigator
- 微信小程序基础之input输入框控件
- 微信小程序基础之input输入框控件
- Delphi 如何操作外部程序的控件(如按钮,文本框,单选按钮等)
- [javascript基础控件操作]--checkbox操作
- [javascript基础控件操作]--radio操作
- asp.net(C#)调用C++程序并交互操作【转】http://www.cnblogs.com/greatverve/archive/2010/06/07/Csharp-transfer-Cpp.html
- MongoDB数据库操作和程序基础文档[转自http://blog.csdn.net/xto/archive/2010/03/22/5403855.aspx]
- 错误:无法执行操作,因为未将指定的 Storyboard 应用到此交互控件的对象
- Oracle基础学习二:表的创建 数据的操作 在VS程序中的查询显示
- Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
- C02-程序设计基础提高班(C++)第14周上机任务-文件操作
- MongoDB数据库操作和程序基础文档
- [javascript基础控件操作]--select操作
- 学习学习 Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
- C#线程相关问题总结:基本操作及UI控件交互