• MUI 图标筛选切换(父页面传值子页面)


     

     1 父页面: index.html

    <li class="tab_layout">
         <a href="javascript:;" class="show_type">&nbsp;</a>
    </li>
    
    <script>
      var detailPage = null;
        //添加切换样式的点击事件
        mui('.tab_layout').on('tap', 'a', function(e) {
              $(this).toggleClass('show_list');
              var id = this.getAttribute('test');
             //获得列表子页面
             if(!detailPage){
                detailPage = plus.webview.getWebviewById('pullrefresh_sub.html');
             }
             //触发子页面页面的newsId事件
             mui.fire(detailPage,'newsId',{
                 id:id
             });
             //打开子页面          
    
            });  
    </script>
     

     子页面: pullrefresh_sub.html

    <div class="searchListBox">
              <!--数据列表-->
              <ul class="mui-table-view mui-table-view-chevron">
     
                   <li>
                   <a href="##" class="list_item mui-clearfix">
                   <div class="pic_box">
                         <img src="../../images/softlist.jpg" />
                    </div>
                    <div class="list_word_right">
                          <div class="title_box">欧宝家居现代简约布艺床花纹</div>
                          <div class="comment_box">已售<span style="color: #cb8f36;"> 0</span></div>
                          <div class="price_box">¥16040.00元</div>
                    </div>
                   </a>
                   <span class="bug_car" onclick="addToCart(1254)">
                    <i class="icon-shop_cart"></i>
                     </span>
                  </li>
             </ul>
     </div>
    
    
    
    <script>
    
    window.addEventListener('newsId',function(event){
           $('.searchListBox').toggleClass('openList');
               //通过event.detail可获得传递过来的参数内容      
           });
    
    </script>
  • 相关阅读:
    PHP 函数大集合
    PHP 单词集合
    PHP 常用函数集合
    Linux 服务器中搭建环境
    windows下cmd中命令操作
    TP中的AJAX返回ajaxReturn()
    PHP面试题
    CI表单验证
    CI数据库操作_查询构造器类
    react 的核心思想 【声名式】Declarative 的理解
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/6587475.html
Copyright © 2020-2023  润新知