列表中的模糊背景sencha触摸

Question

我有一个列表，其中包含我的移动应用程序的主菜单，当用户向右滑动或单击菜单图标时，它是可见的。我想要这个列表的背景，因此主菜单要模糊。

我检查了css filter:blur属性，可以使用它来完成，但您需要在包含您的内容的div下有一个额外的div，并将filter:blur应用于它，如Codepen 中所示

下面是我的sencha触摸列表代码

Ext.define('MobileApp.view.SlideList', {
   extend: 'Ext.List',
   xtype: 'slidelist',
   config: {
      cls: 'slide1',
      variableHeights: true,
      onItemDisclosure: true,
      store: 'SlideListStore',

      itemTpl: ['<div class="slideImg" style="background-image:url(resources/images/{img});"></div>',
          '{title}',
      '<div class="settingImg" id="settingImg" style="background-image:url(resources/icons/nw-icons/settings.png);"></div>'].join(''),
      listeners: {
         initialize: function (comp, eOpts) {
            comp.element.on(
               'swipe',
               function (event, node, options, eOpts)
               {
                  /*send event as a argument to get direction of swipe*/
                  this.fireEvent('swipe', event);
               },
               comp
            );
         }
      }
   }
});

我不知道在哪里放置额外的div并对其应用filter:blur。任何指针都会很有帮助。

Answer 1

这就是您想要实现的目标吗https://fiddle.sencha.com/#fiddle/4tb

以下是如何完成

1. 添加一个空div作为列表的html属性
2. 删除列表的背景

3. 添加css以模糊图像

   .setMyBackground｛
    nbsp nbsp；位置：固定
    nbsp nbsp；左：0
    nbsp nbsp；右：0
    nbsp nbsp；显示：块
    nbsp nbsp；背景图像：url（'http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'）
    nbsp nbsp；宽度：100%
    nbsp nbsp；高度：100%
    nbsp nbsp-webkit过滤器：模糊（5px）
    nbsp nbsp-moz滤镜：模糊（5px）
    nbsp nbsp-o-filter：模糊（5px）
    nbsp nbsp-ms过滤器：模糊（5px）
    nbsp nbsp；过滤器：模糊（5px）
    nbsp nbsp；z指数：-1
   }

   .slide1｛background:none；｝