actionSheet

最新推荐文章于 2022-10-10 17:48:49 发布
最新推荐文章于 2022-10-10 17:48:49 发布
阅读量134 收藏
点赞数
原文链接：http://www.cnblogs.com/mxy666/p/8000882.html
版权 
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>ActionSheet</title>
        <script src="js/index.js"></script>
        <style>
            body {
                margin: 0;
                text-align: center;
            }
            
            button {
                margin: 100px auto;
                padding: 2em;
                border: 1px solid #CCC;
                border-radius: 5px;
                background: #FFF;
            }
            /*组件样式*/
            .pb-container {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999999
            }
            
            .pb-cover {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .2);
            }
            
            .pb-buttons {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
            }
            
            .pb-button {
                background: #FFF;
                padding: 10px;
                text-align: center;
            }
            
            .pb-button:last-child {
                margin-top: 2px;
            }
            
            @-webkit-keyframes pb-easein {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            
            @keyframes pb-easein {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            
            @-webkit-keyframes pb-easeout {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }
            
            @keyframes pb-easeout {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }
            
            .pb-in {
                -webkit-animation: pb-easein .30s forwards;
                animation: pb-easein .30s forwards;
            }
            
            .pb-out {
                -webkit-animation: pb-easeout .30s forwards;
                animation: pb-easeout .30s forwards;
            }
            
            @-webkit-keyframes pb-buttons-easein {
                from {
                    -webkit-transform: translate(0, 100%) translateZ(0);
                    transform: translate(0, 100%) translateZ(0);
                }
                to {
                    -webkit-transform: translate(0, 0) translateZ(0);
                    transform: translate(0, 0) translateZ(0);
                }
            }
            
            @keyframes pb-buttons-easein {
                from {
                    -webkit-transform: translate(0, 100%) translateZ(0);
                    transform: translate(0, 100%) translateZ(0);
                }
                to {
                    -webkit-transform: translate(0, 0) translateZ(0);
                    transform: translate(0, 0) translateZ(0);
                }
            }
            
            @-webkit-keyframes pb-buttons-easeout {
                from {
                    -webkit-transform: translate(0, 0) translateZ(0);
                    transform: translate(0, 0) translateZ(0);
                }
                to {
                    -webkit-transform: translate(0, 100%) translateZ(0);
                    transform: translate(0, 100%) translateZ(0);
                }
            }
            
            @keyframes pb-buttons-easeout {
                from {
                    -webkit-transform: translate(0, 0) translateZ(0);
                    transform: translate(0, 0) translateZ(0);
                }
                to {
                    -webkit-transform: translate(0, 100%) translateZ(0);
                    transform: translate(0, 100%) translateZ(0);
                }
            }
            
            .pb-in .pb-buttons {
                -webkit-animation: pb-buttons-easein .30s forwards;
                animation: pb-buttons-easein .30s forwards;
            }
            
            .pb-out .pb-buttons {
                -webkit-animation: pb-buttons-easeout .30s forwards;
                animation: pb-buttons-easeout .30s forwards;
            }
        </style>
    </head>

    <body>
        <p id="name">-</p>
        <p id="id">-</p>
        <p id="type">-</p>
        
        <button type="button" id="open">打开ActionSheet</button>
        
        <script>
            // data是你请求的数据
            let data = [
                {
                    name: 'jack',
                    id: '210121458',
                    type: '信息安全需求'
                },
                {
                    name: 'tom',
                    id: '210121238',
                    type: '会议议程'
                },
                {
                    name: 'rose',
                    id: '211121458',
                    type: '其他'
                }
            ]
            // btnsObj是用来装数据的 传到这个组件里
            let btnsObj = {}
            data.forEach(function(v){
                let callBack = function(e) {
                    getInfo(e.target.innerHTML)
                    this.hide()
                }
                btnsObj[v.type] = callBack
            })
            // 这个函数是点完actionSheet的回调 type是你选的那个的名字
            let getInfo = function(type) {
                data.forEach(function(v){
                    if (v.type === type) {
                        // 这个v就是当前选中的
                        document.querySelector("#name").innerHTML = v.name
                        document.querySelector("#type").innerHTML = v.type
                        document.querySelector("#id").innerHTML = v.id
                    }
                })
            }
            let as = new ActionSheet({
                buttons: btnsObj
            });
            document.getElementById('open').addEventListener('click', function() {
                console.log(btnsObj)
                as.show()
            })
        </script>
    </body>

</html>

 

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.ActionSheet = factory());
}(this, (function () { 'use strict';

function keyValue(args, getter, setter){
    var attrs = {}, 
        keys, 
        key = args[0], 
        value = args[1];
    
    if(typeof key === 'object'){
        attrs = key;
    }else if(args.length === 1){
        return this[0] ? getter(this[0]) : null;
    }else{
        attrs[key] = value;
    };

    keys = Object.keys(attrs);
    
    return this.each(function(el){
        keys.forEach(function(key){
            setter(el, key, attrs);
        });
    });
};

// 查找节点，返回一个可操作的节点数组
function tethys(selector, context){

    var nodes = [];
    
    // 把参数转换为包含Node的数组
    if(selector.each && selector.on){
        // tethys 对象
        return selector;
    }else if(typeof selector === 'string'){
        // html代码或选择器
        if(selector.match(/^[^\b\B]*\</)){
            // html代码
            nodes = tethys.parseHtml(selector);
        }else{
            // 选择器
            nodes = (context || document).querySelectorAll(selector);
        };
    }else if(Array.isArray(selector) || selector.constructor === NodeList){
        // 包含节点的数组或NodeList
        nodes = selector;
    }else if(selector.constructor === Node){
        // 节点
        nodes = [selector];
    }else{
        throw 'error param';
    };

    // 当Node被appendChild方法添加到其它元素中后，该Node会被从它所在的NodeList中移除
    // 为了避免这种情况，我们要把NodeList转换成包含Node的数组
    nodes = Array.prototype.map.call(nodes, function(n){
        return n;
    });

    // 给数组添加dom操作方法
    tethys.extend(nodes, tethys.fn);

    return nodes;
};

// 扩展
tethys.extend = function(){
    var args = arguments, 
        deep = false, 
        dest, 
        prop = Array.prototype;

    if (typeof args[0] === 'boolean') {
        deep = prop.shift.call(args);
    };

    dest = prop.shift.call(args);
    
    prop.forEach.call(args, function (src) {
        Object.keys(src).forEach(function (key) {
            if (deep && typeof src[key] === 'object' && typeof dest[key] === 'object') {
                extend(true, dest[key], src[key]);
            } else if (typeof src[key] !== 'undefined') {
                dest[key] = src[key];
            };
        });
    });
    return dest;
};

// 合并数组
tethys.merge = function(ary1, ary2){
    (ary2 || []).forEach(function(n){
        ary1.push(n);
    });
};

// 把html代码转换成NodeList
tethys.parseHtml = function(str){
    var div = document.createElement('DIV');
    div.innerHTML = str;
    return div.childNodes;
};

// 微型模板
tethys.tpl = function(s, o) {
    var SUBREGEX = /\{\s*([^|}]+?)\s*(?:\|([^}]*))?\s*\}/g;
    return s.replace ? s.replace(SUBREGEX, function (match, key) {
        return typeof o[key] === 'undefined' ? match : o[key];
    }) : s;
};

// 
tethys.fn = {

    // 遍历
    each: function(fn){
        
        Array.prototype.forEach.call(this || [], fn);

        return this;
    },

    // 绑定事件
    on: function(events, fn){

        events = events.split(/\s*\,\s*/);

        return this.each(function(el){

            fn = fn.bind(el);

            events.forEach(function(event){
                el.addEventListener(event, fn);
            });
        });
    },

    // 设置css
    // css('color', 'red')
    // css({ color: 'red' })
    css: function(key, value){
        
        var format = function(key){
            return key.replace(/(-([a-z]))/g, function(s, s1, s2){
                return s2.toUpperCase();
            });
        };

        return keyValue.call(this, arguments, function(el){
            return el.style[format(key)];
        }, function(el, key, attrs){
            el.style[format(key)] = attrs[key] + '';
        });
    },

    // 设置或者返回属性
    attr: function(key, value){

        return keyValue.call(this, arguments, function(el){
            return el.getAttribute(key);
        }, function(el, key, attrs){
            el.setAttribute(key, attrs[key] + '');
        });
    },

    // 检查是否有class
    hasClass: function(cls){
        var has = false, reg = new RegExp('\\b' + cls + '\\b');

        this.each(function(el){
            has = has || !!el.className.match(reg);
        });
        
        return has;
    },

    // 添加class
    addClass: function(cls, type){
        var reg = new RegExp('\\b' + cls + '\\b');
        
        // 为所有节点添加或删除class
        return this.each(function(el){
            var name = el.className;

            if(typeof name !== 'string') return;
            
            if(type === 'remove'){
                // remove
                if(name.match(reg)) {
                    el.className = name.replace(reg, '');
                }
            }else{
                // add
                if(!name.match(reg)) {
                    el.className += ' ' + cls;
                }
            }
        });
    },

    // 删除class
    removeClass: function(cls){
        return this.addClass(cls, 'remove');
    },

    // 设置html
    html: function(html){
        return this.each(function(el){
            el.innerHTML = html;
        });
    },
    
    // 显示
    show: function(){
        return this.each(function(el){
            if(el.style.display === 'none'){
                el.style.display = el.getAttribute('o-d') || '';
            };
        });
    },
    
    // 隐藏
    hide: function(){
        return this.each(function(el){
            if(el.style.display !== 'none') {
                el.setAttribute('o-d', el.style.display);
                el.style.display = 'none';
            };
        });
    },

    // 切换显示隐藏
    toggle: function(){
        return this.each(function(el){
            var e = $(el);
            e.css("display") == "none" ? e.show() : e.hide();
        });
    },

    // 追加节点
    append: function(child){
        
        var children = tethys(child);
        
        return this.each(function(el){
            children.each(function(child, i){
                el.appendChild(child);
            });
        });
    },

    // 查找
    find: function(selector){
        var nodes = [];

        this.each(function(el){
            tethys(selector, el).each(function(node){
                nodes.push(node);
            });
        });

        return tethys(nodes); 
    }

};

/*!
* tap.js
* Copyright (c) 2015 Alex Gibson 
* https://github.com/alexgibson/tap.js/
* Released under MIT license
*/

function Tap(el) {
    this.el = typeof el === 'object' ? el : document.getElementById(el);
    this.moved = false; //flags if the finger has moved
    this.startX = 0; //starting x coordinate
    this.startY = 0; //starting y coordinate
    this.hasTouchEventOccured = false; //flag touch event
    this.el.addEventListener('touchstart', this, false);
    this.el.addEventListener('mousedown', this, false);
}

// return true if left click is in the event, handle many browsers
Tap.prototype.leftButton = function(event) {
    // modern & preferred:  MSIE>=9, Firefox(all)
    if ('buttons' in event) {
        // https://developer.mozilla.org/docs/Web/API/MouseEvent/buttons
        return event.buttons === 1;
    } else {
        return 'which' in event ?
            // 'which' is well defined (and doesn't exist on MSIE<=8)
            // https://developer.mozilla.org/docs/Web/API/MouseEvent/which
            event.which === 1 :
            // for MSIE<=8 button is 1=left (0 on all other browsers)
            // https://developer.mozilla.org/docs/Web/API/MouseEvent/button
            event.button === 1;
    }
};

Tap.prototype.start = function(e) {
    if (e.type === 'touchstart') {

        this.hasTouchEventOccured = true;
        this.el.addEventListener('touchmove', this, false);
        this.el.addEventListener('touchend', this, false);
        this.el.addEventListener('touchcancel', this, false);

    } else if (e.type === 'mousedown' && this.leftButton(e)) {

        this.el.addEventListener('mousemove', this, false);
        this.el.addEventListener('mouseup', this, false);
    }

    this.moved = false;
    this.startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
    this.startY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
};

Tap.prototype.move = function(e) {
    //if finger moves more than 10px flag to cancel
    var x = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
    var y = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
    if (Math.abs(x - this.startX) > 10 || Math.abs(y - this.startY) > 10) {
        this.moved = true;
    }
};

Tap.prototype.end = function(e) {
    var evt;

    this.el.removeEventListener('touchmove', this, false);
    this.el.removeEventListener('touchend', this, false);
    this.el.removeEventListener('touchcancel', this, false);
    this.el.removeEventListener('mouseup', this, false);
    this.el.removeEventListener('mousemove', this, false);

    if (!this.moved) {
        //create custom event
        try {
            evt = new window.CustomEvent('tap', {
                bubbles: true,
                cancelable: true
            });
        } catch (e) {
            evt = document.createEvent('Event');
            evt.initEvent('tap', true, true);
        }

        //prevent touchend from propagating to any parent
        //nodes that may have a tap.js listener attached
        e.stopPropagation();

        // dispatchEvent returns false if any handler calls preventDefault,
        if (!e.target.dispatchEvent(evt)) {
            // in which case we want to prevent clicks from firing.
            e.preventDefault();
        }
    }
};

Tap.prototype.cancel = function() {
    this.hasTouchEventOccured = false;
    this.moved = false;
    this.startX = 0;
    this.startY = 0;
};

Tap.prototype.destroy = function() {
    this.el.removeEventListener('touchstart', this, false);
    this.el.removeEventListener('touchmove', this, false);
    this.el.removeEventListener('touchend', this, false);
    this.el.removeEventListener('touchcancel', this, false);
    this.el.removeEventListener('mousedown', this, false);
    this.el.removeEventListener('mouseup', this, false);
    this.el.removeEventListener('mousemove', this, false);
};

Tap.prototype.handleEvent = function(e) {
    switch (e.type) {
        case 'touchstart': this.start(e); break;
        case 'touchmove': this.move(e); break;
        case 'touchend': this.end(e); break;
        case 'touchcancel': this.cancel(e); break;
        case 'mousedown': this.start(e); break;
        case 'mouseup': this.end(e); break;
        case 'mousemove': this.move(e); break;
    }
};

const tpl = 
    '<div class="pb-container">\
        <div class="pb-cover"></div>\
        <div class="pb-buttons"></div>\
    </div>';

const buttonTpl = '<div class="pb-button">{text}</div>';

var ActionSheet = function(opt){

    // 默认参数
    opt = tethys.extend({
        buttons: {},
        inTime: 500,
        outTime: 500
    }, opt);
    
    // 渲染
    this.render().update(opt.buttons);
};

// 绑定点击事件
function bindTapEvent(el, fn){
    new Tap(el);
    el.addEventListener('tap', fn, false);
}

ActionSheet.prototype = {

    // 初始化渲染
    render: function(){
        var doc = document.documentElement;

        this.el = tethys(tpl);

        this.el.hide().css({
            width: doc.clientWidth + 'px',
            height: doc.clientHeight + 'px'
        });

        bindTapEvent(this.el.find('.pb-cover')[0], this.hide.bind(this));

        tethys('body').append(this.el);
        
        return this;
    },

    // 显示
    show: function(){


        this.el.show();
        this.el.addClass('pb-in');

        setTimeout(function(){
            this.el.removeClass('pb-in');
        }.bind(this), 350);

        return this;
    },

    // 隐藏
    hide: function(){

        this.el.addClass('pb-out');

        setTimeout(function(){
            this.el.removeClass('pb-out').hide();
        }.bind(this), 300);
        
        return this;
    },

    // 更新按钮
    update: function(buttons){
        var buttonContainer = this.el.find('.pb-buttons');

        // 清空按钮容器
        buttonContainer.html('');

        // 添加取消按钮
        buttons['取消'] = this.hide.bind(this);
        
        // 遍历创建按钮
        Object.keys(buttons).forEach(function(key){
            var n = buttons[key],
                btn = tethys(tethys.tpl(buttonTpl, {
                    text: key
                }));

            // 绑定tap事件
            bindTapEvent(btn[0], function(e){

                e.stopPropagation();
                e.preventDefault();
                
                // 如果参数是函数则调用
                // 如果是字符串则认为是url直接跳转
                if(typeof this.action === 'function'){
                    this.action.call(this.context, e);
                }else if(typeof this.action === 'string'){
                    location.href = this.action;
                };
            }.bind({action: n, context: this}));

            // 添加到按钮容器
            buttonContainer.append(btn);
        }.bind(this));

        return this;
    }
};

return ActionSheet;

})));

 

转载于:https://www.cnblogs.com/mxy666/p/8000882.html

weixin_30302609
关注
使用Vant完成底部弹出框 ActionSheet 上拉菜单
柠檬不萌只是酸i
09-15 1万+
效果图： 代码展示：（ActionSheet 上拉菜单） <template> <!-- ActionSheet 上拉菜单 --> <div id="action_sheet"> <van-button type="primary" @click="alertMenu">弹出菜单</van-button> ...
vant ActionSheet动作面板之一级面板和二级面板
weixin_57246351的博客
08-08 1609
vant ActionSheet动作面板之一级面板和二级面板 main.js导入组件 import { ActionSheet } from 'vant'; Vue.use(ActionSheet); 组件内 <template> <div> <button @click="show1=true">点我有惊喜</button> <!-- 一级反馈面板 --> <!-- get-container="b
微信weui之actionSheet应用
柠檬加冰
07-18 9307
我是代码 //设置弹出框弹出事件 function showImagesActionSheet(index) { console.log('showImagesActionSheet in '); var mask = $('#mask'); var weuiActionsheet = $('#weui_actionsheet');
微信小程序开发——ActionSheet
番薯大佬的专栏
04-17 848
WeChat小程序交流（QQ群：769977169）效果图代码示例xxx.wxml&lt;button bindtap='imageClick'&gt;选择图片&lt;/button&gt;xxx.wxjsPage({ imageClick: function() { wx.showActionSheet({ itemList: ['相册', '拍照'], s...
关于vant组件ActionSheet事件穿透的问题以及解决方案
weixin_40618068的博客
06-28 7196
关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页) 此时我点击评价，弹出actionSheet动作面板 如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击
自定义ActionSheet
04-05
在iOS开发中，ActionSheet是一种常见的用户界面元素，它用于提供一组可选操作，通常用于在用户触发某个事件时展示。ActionSheet设计的目标是让用户在有限的选项中做出决定，而不是打开一个新的视图或者模态窗口。在...
Android ActionSheet动画效果实现
04-05
在Android开发中，有时我们希望实现与iOS类似的ActionSheet效果，即当用户点击某按钮时，自底部向上滑出一个包含多个选项的菜单。在本案例中，开发者baoyongzhang分享了他的实现方法，开源项目名为“android-...
react-native-actionsheet：React Native的优雅ActionSheet组件
02-05
跨平台ActionSheet。 该组件实现了自定义ActionSheet，并提供了在不同平台（iOS和Android）上进行绘制的相同方法。 实际上，为了保持最佳效果，它仍然在iOS上使用ActionSheetIOS。 安装 npm install react-native-...
ActionSheet
04-28
ActionSheet是一种在移动应用开发中常见的用户界面元素，主要用于展示一系列可选操作，通常在底部弹出，用户可以通过点击选项来进行交互。ActionSheet的设计目的是在有限的屏幕空间内提供一种优雅的方式来显示多个...
自定义actionSheet
04-05
【自定义actionSheet】是一种在iOS应用开发中常见的交互元素，通常用于提供用户多项选择操作。在iOS原生系统中，`UIAlertController`的样式之一就是`UIActionSheet`，但其样式相对单一，不能满足所有设计需求。针对...
微信小程序使用Vant在ActionSheet 无法实现取消操作的解决方案
最新发布
weixin_52710755的博客
10-10 1482
微信小程序使用Vant在ActionSheet 无法实现取消操作的解决方案
微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
杭州.黄老师
01-13 3827
效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;ActionSheet&lt;/view&gt; &lt;view class="page__desc"&gt;弹出式菜
轻量、可靠的移动端组件库 Vant 1.0 正式发布
非著名程序员
03-25 1661
【回复“1024”，送你一个特别推送】说实话，最近已经快一年没有接触过原生开发了，随着接触开发微信小程序，接触 Vue 等，也越来越喜欢这种 JS 前端开发，感觉特别好玩。不管是 Vue ，还是 React ，还是微信小程序开发，其实都是大同小异，开发方式也都是响应式的开发，饿了么开源的 Element UI 也挺好的。所以，每天学习，进步，然后越来越喜欢真的是一种幸福。好了，不感慨了，进入正题。
actionsheet（操作表）
acyj68799的博客
12-11 456
推荐使用锚点方式显示、隐藏actionsheet； 若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"toggle"参数即可 //传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理； mui('#sheet1').popover('toggle');锚点例子<a type="button" hr...
微信小程序自定义组件——底部菜单栏 ActionSheet
JaimeCheng的博客
02-21 4691
系列文章：微信小程序自定义组件——模态框 Modal 写这个自定义ActionSheet组件，和自定义modal一样，有些开放能力必须绑定在button上，而我们有时候又会有在底部上拉菜单中实现转发功能的需求，或者别的微信开放能力，小程序原生的ActionSheet依然无法实现，故此组件应运而生。 安装 1.使用npm安装 直接使用小程序开发工具自带的构建npm，请按下面几个步骤引入： 确保项目...
vant之解决action-sheet点击取消和遮罩层的bug
KID963931445的博客
07-09 7727
vant出现点击取消按钮出现了冒泡事件，点击遮罩层，面盘弹不回去。解决代码如下： vant官方文档提供了click-overlay事件来监听遮罩被点击的事件。 <van-action-sheet @click="stopPro($event)" @click-overlay="overlay" ></van-action-sheet> methods:{ stopPro(e){ e.stopPropraation(); //组织冒泡 e.preventDefaut
UI--仿IOS控件之ActionSheet样式 and more..
Qiaoidea on the way
06-23 4807
在讲述了弹出式对话框和对其 源码分析之后，我们尝试来模仿一下ios中常见的弹出式按钮选项——ActionSheet。其实样式也比较简单，从底部弹出几个按钮，提供选项菜单，同时出现半透明背景蒙版。具体详情及效果参考IOS设备。 具体怎么做，来理下思路。首先继承自Fragment，在OnCreateView中实现自定义View，当然，在自定义View中使用我们的自定义属性，控制风格样式，另外呢，定义一个静态Builde
微信小程序学习：操作反馈组件(一)：action-sheet组件及获取action-sheet-item值
一杯冰啤
04-18 4963
&lt;action-sheet&gt;&lt;/action-sheet&gt;有两个子组件:        &lt; action-sheet-item&gt;&lt;/ action-sheet-item&gt;是子选项，        &lt;action-sheet-cancel&gt;&lt;/action-sheet-cancel&gt;是取消选项，与action-sheet-ite...
微信小程序 action-sheet 反馈上拉菜单
xiaochun365的博客
04-10 4239
//js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({
iOS自定义ActionSheet实现教程：优雅样式与封装策略
本文档详细介绍了如何在iOS开发中创建一个美观且自定义的ActionSheet，以满足特定设计需求。首先，作者指出在项目开发中，当原生控件无法满足定制化风格时，自定义控件是提升产品一致性的重要手段。由于设计师的审美...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值