微信小程序,微信小程序完成topBar底部选择栏作用

By admin in 4858美高梅 on 2019年6月29日

微信小程序 action-sheet

4858美高梅 1

微信小程序 开荒文书档案,相关小说:

正文实例为我们分享了微信小程序达成topBar尾巴部分选用栏的具体代码,供我们参照他事他说加以考查,具体内容如下

微信小程序,微信小程序完成topBar底部选择栏作用。action-sheet是从尾部弹出的精选菜单,子菜单通过action-sheet-item和action-sheet-cancel内定,action-sheet-item是菜单项,action-sheet-cancel看名就会猜到其意义是撤除隐藏菜单,大家能够透过为action-sheet-item加多bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件。能够在bindchange绑定的函数中决定菜单的显示。其它点击空白处时菜单也会暗藏。

action-sheet组件是从尾部弹出可选菜单项,估算也是以史为鉴IOS的统一企图加多的,action-sheet有七个子组件,
action-sheet-item为各种选项,action-sheet-cancel裁撤选项,与action-sheet-item中间会有距离,并且点击会触发action-sheet监听事件

微信小程序  action-sheet

先看一下效应:尾部分为多个页面,点击区别的选项就能跳转到相呼应的页面去。

官方文书档案

重要质量:

微信小程序 modal

 4858美高梅 2

 4858美高梅 3

4858美高梅 4

微信小程序 toast

下边是文本夹的构造

 .wxml

wxml

微信小程序 loading

4858美高梅 5

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for-items="{{actionSheetItems}}">
    <action-sheet-item bindtap="bind{{item}}">{{item}}</action-sheet-item>
  </block>
  <action-sheet-cancel >取消</action-sheet-cancel>
</action-sheet>
<!--触发action-sheet事件-->
<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
<!--默认action-sheet为隐藏,由button触发-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >

 <block wx:for-items="{{actionSheetItems}}" > 
  <action-sheet-item >{{item}}</action-sheet-item>
 </block>
 <!--自动隐藏action-sheet-->
 <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

微信小程序  action-sheet

以此分为八个页面,分别是 index,dujia,Info

.js

js

属性名 类型 默认值 说明
hidden Boolean true 是否隐藏
bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据

上边是代码:

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
  actionSheetHidden: true,
  actionSheetItems: items
 },
 actionSheetTap: function(e) {
  console.log(this);
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  })
 },
 actionSheetChange: function(e) {
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  });
  console.log("点击ation-sheet-cancel,会触发action-sheet绑定的事件。在这里可以通过改变hidden控制菜单的隐藏");
 }
}

for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
  pageObject['bind' + itemName] = function(e) {
   console.log('click' + itemName, e)
  }
 })(items[i])
}

Page(pageObject)
Page({
 data:{
 // text:"这是一个页面"
 actionSheetHidden: true,
 actionSheetItems: ['item1', 'item2', 'item3']

 },

 listenerButton: function() {
  this.setData({
  //取反
   actionSheetHidden: !this.data.actionSheetHidden
  });
 },

 listenerActionSheet:function() {
 this.setData({
  actionSheetHidden: !this.data.actionSheetHidden
 })
 },


 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

action-sheet-item

app.json

运营效果

相关小说:

底层菜单表的子选项。

{
 "pages": [//有几个页面,pages里面就要绑定几个
  "pages/dujia/dujia",
  "pages/index/index",
  "pages/info/info"
 ],
 "window": {
  "backgroundTextStyle": "dark",
  "navigationBarBackgroundColor": "#DF3031",
  "navigationBarTitleText": "topBar练习",
  "navigationBarTextStyle": "white"
 },
 "tabBar": {
  "color": "#000000",
  "selectedColor": "#DF3031",
  "list": [
   {
    "pagePath": "pages/index/index",
    "text": "第一页",
    "iconPath": "images/1.png",
    "selectedIconPath": "images/1.png"
   },
   {
    "pagePath": "pages/dujia/dujia",
    "text": "第二页",
    "iconPath": "images/2.png",
    "selectedIconPath": "images/2.png"
   },
   {
    "pagePath": "pages/info/info",
    "text": "第三页",
    "iconPath": "images/3.jpg",
    "selectedIconPath": "images/3.jpg"
   }
  ]
 }
}

4858美高梅 6

hello
WeApp                    
 icon组件
Window                         
   text组件                                switch组件
tabBar尾巴部分导航              
 
progress组件                        action-sheet
应用生命周期                    button组件                           
modal组件
页面生命周期                    checkbox组件                       toast组件
模块化详                           form组件详                           loading
组件
多少绑定                           input
组件                            
navigator 组件
View组件                        
 picker组件                            audio
组件
scroll-view组件        
        radio组件                              video组件
swiper组件                      
 slider组件                             
Image组件

action-sheet-cancel

任何的页面都写在对应文件夹的.wxml文件之中。.wxml文件就想当于我们网页设计中的
html同样。

哪些让点击空白处时不隐藏图片呢?别的点击撤消的时候自动隐藏菜单不固然了,非要本身写一句话让它隐藏,真难为。

您恐怕感兴趣的稿子:

  • 微信小程序
    action-sheet底部菜单详解
  • 微信小程序
    action-sheet详解及实例代码
  • 微信小程序 action-sheet
    反馈上拉菜单轻便实例
  • 微信小程序
    下拉菜单简单实例
  • 微信小程序 下拉菜单的贯彻
  • 微信小程序
    特效菜单抽屉效果实例代码
  • 微信小程序开拓之圆形菜单
    仿民生银行圆形菜单实例
  • 微信小程序实战之自定义抽屉菜单(7)
  • Android中微信小程序开荒之弹出美食指南
  • 微信小程序实现跟随菜单功能和循环嵌套加载数据
  • 微信小程序达成action-sheet弹出底部菜单功效【附源码下载】

底层菜单表的吊销开关,和action-sheet-item的界别是,点击它会触发action-sheet的change事件,并且外观上会同它上边包车型大巴剧情间隔开分离来。

比方笔者的index页面:

感谢阅读,希望能扶助到我们,多谢大家对本站的支持!

示范代码:

<view>
 第一页
</view>

你或然感兴趣的稿子:

  • 详解微信小程序设置尾巴部分导航栏目方法
  • 微信小程序
    底部导航栏目开辟资料
  • 4858美高梅 ,微信小程序
    (三)tabBar尾巴部分导航详细介绍
  • 微信小程序完成topBar尾部选择栏效能
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>


var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}

for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
 pageObject['bind' + itemName] = function(e) {
 console.log('click' + itemName, e)
 }
 })(items[i])
}

Page(pageObject)
action-sheet

上述正是本文的全体内容,希望对大家的读书抱有帮忙,也期待大家多多帮助脚本之家。

4858美高梅 7

您恐怕感兴趣的稿子:

  • 详解微信小程序设置尾部导航栏目方法
  • 微信小程序
    底部导航栏目开荒资料
  • 微信小程序
    action-sheet尾部菜单详解
  • 微信小程序
    (三)tabBar尾巴部分导航详细介绍

多谢阅读,希望能帮忙到大家,感激咱们对本站的支撑!

您恐怕感兴趣的稿子:

  • 微信小程序
    action-sheet底部菜单详解
  • 微信小程序(二十二)action-sheet组件详细介绍
  • 微信小程序 action-sheet
    反馈上拉菜单轻便实例
  • 微信小程序
    下拉菜单轻松实例
  • 微信小程序 下拉菜单的贯彻
  • 微信小程序
    特效菜单抽屉效果实例代码
  • 微信小程序开荒之圆形菜单
    仿交行圆形菜单实例
  • 微信小程序实战之自定义抽屉菜单(7)
  • Android中微信小程序开辟之弹出美食指南
  • 微信小程序达成跟随菜单功用和循环嵌套加载数据
  • 微信小程序实现action-sheet弹出尾部菜单功效【附源码下载】

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有