MUI .mui-table-view-cell事件绑定

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

    最近使用MUI进行开发,遇到了一些坑。这里分享处理方法,希望能帮小伙伴们解决遇到类似的问题。

    需求:

            1.点击立即使用跳转至优惠券对应的产品列表。

            2.点击更多查看适用的产品名称。

        

    这里我使用的是MUI封装好的控件:<ul class="mui-table-view"><li class="mui-table-view-cell"></li></ul>

    

     在直接绑定立即出借按钮的时候被<li></li>标签里mui-table-view-cell mui-active拦截了。

     处理方案:
   

以上是我的处理方式,也可以参考MUI的官方文档:http://dev.dcloud.net.cn/mui/event/





Web App 开发----列表 1.列表 列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类。 点击列表,对应列表项显示灰色高亮,若想自定义高亮颜色,只需要重写.mui-table-view-cell.mui-active 若右侧需要增加导航箭头,变成导航链接,则只需在li节点下增加a子节点,并为该a节点增加.mui-navigate-right类 <!doctype html> <html&gt 阅读详情

相关推荐

mui-table:改进的Material-UI表

多功能桌 通过data和columns道具简化了视觉组件的使用。 有关正在运行的<MuiTable>示例,请参见或查看 注意:基于react-virtualized的1.xx版本现已作为

mui mui-table-view mui-table-view-cell 随笔

mui-table-view mui-table-view-cell  设置选中状态: var items = document.getElementById("items"); mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(e) { var lastActiveItem = items.querySele...

戮筱沫博客 6956

Reality Capture控制点修复/合并模型

通过增加控制点/修改对齐设置参数来修复模型被分为两个部分的解决方法

草履虫建模的博客 5211

MUI下拉导航组件 - 应用篇

MUI下拉导航组件 - 看效果图 效果图 全部代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>安家家政</title> <meta name="viewport" content="width=device-width, ...

草巾冒小子的博客 929

mui下拉面板布局 (mui-content,mui-card,mui-table-view,mui-navigate-right)

mui-table-view>mui-table-view-cell一般使用在ul>li嵌套关系,并且会在li下生成下划线 <!--一般列表使用mui-table-view>mui-table-view-cell嵌套关系 --> <ul class="mui-table-view"> <li class="mui-table-view-cell...

crazyo2jam的博客 4035

MUI TableViewCell 上按钮点击Cell同时触发解决

MUI上,我们使用MUI事件监听的方式如下代码: mui("#logisticsUl").on('tap','.mui-table-view-cell',function(event){ console.log(event); }) 很多时候我们需要在Cell上添加按钮或者其他可点击的元素如图: 这时候我们需要继续这种监听: mui("#log

星宇大前端 2437

vue.js三十五—— 从无到有完整的项目实战2

上一章我们完成了首页界面,今天完成新闻资讯模块 1.改造新闻资讯的路由链接 打开首页组件homeContainner.vue,找到新闻资讯的li标签,将a标签改为<router-link>标签,href改成to,跳转链接改成/home/newslist <li class="mui-table-view-cell mui-media mui-col-xs-4...

武汉小喽啰 428

muiapp开发实战03 操作表的使用

操作表的使用及隐藏方法

m1m2m3mmm的博客 1310

mui框架点击mui-table-view-cell时去除背景高亮

当我们在使用mui框架时,用到列表li --> .mui-table-view-cell类时会自带一个点击高亮背景色变灰的效果;做项目页面时可能会使样式错乱,所以需要加如下代码时点击背景变白即可。.mui-table-view-cell > a:not(.mui-btn).mui-active { background-color: #fff;} 转载于:https://www....

weixin_30569033的博客 490

MUI list(列表)

1.普通列表 列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可,如下为示例代码 <ulclass="mui-table-view"> <liclass="mui-table-view-cell&#...

秋城落叶的博客 2184

UI组件

accordion(折叠面板) <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui...

weixin_30719711的博客 140

初探MUI制作微信APP页面(二)

使用MUI制作微信APP页面-优化

梦幻通灵 1672

MUI框架前端开发知识点

1、mui-table-view列表 列表拉动反弹动画效果,只需将列表放置在mui-scroll-wrapper、mui-scroll容器内 //列表具体内容 列表需要用javaScript进行初始化才能滚动,如果列表的内容没有超出屏幕范围,也是不能滚动的 mui('.mui-scroll-wrapper').sc

2185

Mui-列表/table-view

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1...

weixin_44438307的博客 135

HTML应用开发基础篇 - MUI 框架(三)MUI 布局

目录 1、MUI 栅格系统 2、MUI 标题栏 3、MUI 选项卡 4、卡片视图 5、轮播组件 6、列表 1、MUI 栅格系统 2、MUI 标题栏 3、MUI 选项卡 4、卡片视图 5、轮播组件 6、列表 ...

徐小mu的博客 4956

mui实现表格

mui的css文档中没有向bootstrap中类似的写好的样式供调用,但是用table显示表格本身就不难看,再写一些CSS类完全可以放到网页中,下面提供代码:<head> <style> .table { border: 1px solid #cad9ea; color: #666; }

u013720726的博客 2万+

MUI学习笔记-雷云龙

MUI 一、MUI介绍 新工程 布局 MUI的定位是:最接近原生体验的移动App的UI框架 基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。 所以请大家注意,mui有所为有所不为: 1、mui不是jq,不封装dom操作 与ui无关的mui不做,你愿意用jq或zepto就自己用,并不冲突。 但我们并不建议在移动App里引入jq或zepto这些框架,原因如下: 为了性能,层层封装的框架,尤其是遍历循环dom时,影响效率,尤其在低端Android手机上,我

猫腻0303的博客 1589

前端获取JSON数据显示在页面上

从后台获取数据显示在界面上是前端开发所必须要掌握的一项基本技能,简单记录一下从本地模拟数据的JSON文件中获取数据显示在界面上。 1.先创建本地json文件,命名为data.json,json文件存储数据格式如下: { "list":[ { "project_img":"images/Home-logo1-hua.png", "project_name":"1...

kiko.c的博客 4万+

TP5 前端小知识点总结(后续会不断继续更新)

ajax的几种形式

weixin_43588185的博客 444
上一篇: Android7.0后台服务器更新之后使用Intent跳转至APK安装页
下一篇: Android viewpager与fragment切换刷新引起的ANR
Lucy_csdn
博客等级 码龄9年 3粉丝 5原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值