好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括: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>

微信小程序基础之交互操作控件的更多相关文章

  1. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  2. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  3. 微信小程序:JS 交互逻辑

    微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...

  4. 微信小程序基础

    前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...

  5. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  6. 微信小程序基础之试图控件View、ScrollView、Swiper

    今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...

  7. 微信小程序基础知识

    一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...

  8. 微信小程序基础入门

    准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...

  9. 微信小程序基础之创建使用教程

    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取 ...

随机推荐

  1. 学习HTML的第一次课

    1.母板中的标签的含义 1.1< Doctype html/ > 声明文档类型为HTML 1.2< meta charset="UTF-8"/ > 设当前网 ...

  2. windows汇编环境配置

    原文地址 软件下载 需要的软件已经打包,包括dosbox和MASM.如果没有这两个软件可以在下面的地址下载. http://hjwblog.com/game/汇编环境.zip 点击下载 安装dosbo ...

  3. vector数组中STL习惯性用法

    参考:https://blog.csdn.net/lcamisak/article/details/79358060

  4. 将python代码打印成pdf

    将python代码打印成pdf,打印出来很丑,完全不能看. mac下:pycharm 编辑器有print的功能,但是会提示: Error: No print service found. 所以需要一个 ...

  5. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  6. Python 爬取猫眼电影最受期待榜

     主要爬取猫眼电影最受期待榜的电影排名.图片链接.名称.主演.上映时间. 思路:1.定义一个获取网页源代码的函数: 2.定义一个解析网页源代码的函数: 3.定义一个将解析的数据保存为本地文件的函数: ...

  7. [HNOI 2010]Bounce 弹飞绵羊

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  8. [APIO2016]划艇

    题目描述 在首尔城中,汉江横贯东西.在汉江的北岸,从西向东星星点点地分布着 NNN 个划艇学校,编号依次为 111 到 NNN.每个学校都拥有若干艘划艇.同一所学校的所有划艇颜色相同,不同的学校的划艇 ...

  9. [Codeforces]856C - Eleventh Birthday

    题目大意:给出n个数,问有多少种排列把数字接起来是11的倍数.(n<=2000) 做法:一个数后面接一个数等同于乘上10的若干次幂然后加上这个数,10模11等于-1,所以10的若干次幂是-1或1 ...

  10. 【bzoj3173-最长上升子序列-一题两解】

    这道题不就是简单的DP吗,BZOJ在水我!不,你是错的. ·本题特点:       不断向不同位置插入数字(按数字1,2,3,4,5,6……),需要求出每一次插入后的最长上升子序列. ·分析      ...