uniapp uni-list选中子项的样式设置

1：button的点击状态  hover-class

2：uni-list   选中子项的样式  class样式

v-html:显示含有html标签的文本  :border="false"不显示边框

<uni-list  v-for="(item ,index) in mDatalist" :key="index" :border="false"   >

<div  :class="clickpositon==index?'selected':'normal'"  @click="itemclick(index)" >

    <text  class="title"  v-html="item.title"></text>

  <text  class="desctripiton">{{item.bool}}</text>

  </div>

</uni-list>

样式：

.selected{

background: #E9F4FF;

box-shadow: 0rpx 16rpx 24rpx -12rpx #E9F4FF;

border-radius: 12rpx;

border: 4rpx solid #E9F4FF;

padding: 20rpx;

margin: 10rpx;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.normal{

background: #FFFFFF;

box-shadow: 0rpx 16rpx 24rpx -12rpx #E9F4FF;

border-radius: 12rpx;

border: 4rpx solid #E9F4FF;

padding: 20rpx;

margin: 10rpx;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

事件：

初始化变量:

   mDatalist:[],

  clickpositon:0

点击事件：

     itemclick(index){

        let _this =this;

       _this.clickpositon=index; 

       console.log("--listview点击--事件", _this.clickpositon)  ;

   

  }