Question

我有以下列表：

<ons-list-item modifier="tappable" class="list-item" ng-repeat="item in items" ng-click="onItemSelect(item);">
     <ons-row>
          <ons-col width="105px">
              <img ng-src="{{item.thumb}}"></img>
          </ons-col>
          <ons-col>
          <div class="item-title">
              {{ item.name }}
          </div>
          </ons-col>
          <ons-col>
              <ons-button ng-click="onClick();">Add</ons-button>
          </ons-col>
     </ons-row>
 </ons-list-item>

点击列表后总会有效果，点击“添加”按钮时也会出现同样的情况。

我想知道在点击列表右侧的“添加”按钮时是否有任何方法可以删除效果？

Answer 1

点击＆＃34;添加＆＃34;以消除效果。按钮，您应该在该按钮上使用modifier，如下所示：

<ons-button modifier="noeffect" ng-click="onClick();">Add</ons-button>

并为该按钮应用自定义CSS：

.button--noeffect:active{/*Keep the background color the same on tap*/
    opacity:1;
}

选中codepen。

如果您想从列表项中删除点按效果，并且您只想要＆＃34;添加＆＃34;按钮工作点击然后只删除：您列表项中的modifier="tappable"。

OnsenUI有一些可以应用于按钮和列表项的标准modifiers，但您也可以像上面一样创建自己的。{/ p>

点击ons-list-item右侧的ons-button时删除列表效果

1 个答案: