Telerik UI Nativescript - RadListView 涟漪效应

Posted 2023-04-13

【中文标题】Telerik UI Nativescript - RadListView 涟漪效应

【英文标题】：Telerik UI Nativescript - RadListView ripple effect

【发布时间】：2017-03-10 09:21:00

【问题描述】：

我在 NativeScript Angular 2 应用程序中使用了 NativeScript 的 RadListView telerik ui 组件。

当我设置事件 itemTap 和/或 itemHold 时，它们工作得很好，但在列表行上没有通常的点击效果（波纹）。

有没有办法添加这个效果？

提前谢谢大家:)

【问题讨论】：

你可以使用nativescript-ripple插件，它提供了这个功能。您还可以在插件的 repo 中查看演示，其中显示了如何在您的应用中使用它 - github.com/bradmartin/nativescript-ripple/tree/master/demo。

@NikolayTsonev 我尝试了该插件，但它阻止了列表视图的 itemTap 事件触发。 :(

【参考方案1】：

在我看来，这与插件有关。作为一种解决方案，您可以将tap 事件设置为Ripple 组件并获取元素id，这将帮助您区分所选项目。我附上示例代码。

主页.xml

<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 <GridLayout>
  <ListView items=" source "  loaded="onLoaded">
      <ListView.itemTemplate>
        <RL:Ripple rippleColor="#d50000" id="index" tap="onTap2">
            <StackLayout  >
                  <Label text="title" textWrap="true" />
            </StackLayout>
          </RL:Ripple>
      </ListView.itemTemplate>
  </ListView>

 </GridLayout>
</Page>

main-page.ts

import  EventData  from 'data/observable';
import  Page  from 'ui/page';
import  HelloWorldModel  from './main-view-model';
import StackLayout from "ui/layouts/stack-layout"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) 
  // Get the event sender
  let page = <Page>args.object;
  var array=[];
  for(var i=0;i<100; i++)
  
    array.push(index:""+i,title:"title "+i);
  
  page.bindingContext = "source":array;


export function onTap2(args)
  console.log("sample");
  var layouts = args.object;
  var id = layouts.get("id");
  console.log(id);

【参考方案2】：

这与您添加到 itemTemplate 的“list-group-item”类有关。如果您删除该类，您可以再次看到波纹，但是没有样式...我做了以下操作：

1) 添加这个 CSS 样式

.list-group .list-group-item-ripple 
  color: #212121;
  font-size: 16;
  margin: 0;
  padding: 16;

.list-group .list-group-item-ripple Label 
  vertical-align: center;

.list-group .list-group-item-ripple .thumb 
  stretch: fill;
  width: 40;
  height: 40;
  margin-right: 16;

.list-group .list-group-item-ripple.active 
  background-color: #e0e0e0;

.list-group .list-group-item-ripple .list-group-item-text 
  color: #757575;
  font-size: 14;

现在，在您的 xml 中，您将使用“list-group-item-ripple”，而不是使用“list-group-item”类。

只有这个，它应该工作。 观察：请注意，listview 点击事件旨在使用属性“itemTap”ON“”标签，而不是作为子元素的点击事件！