vux Cell组件-CSDN博客

Cell 组件一


<style lang="scss">
  .cell {
    padding-top: 15px;
    padding-bottom: 15px;
    color: #333;
    img {
      display: block;
      margin-right: 15px;
    }
  }
</style>

<template>
    <Group>
        <cell class="cell" title="钱包" :border-intent="false" :is-link="false">
            <img slot="icon" width="26" :src="require('@/assets/images/imgs/dog1.png')">
        </cell>
        <cell class="cell" title="表情" :link="{path:'./index'}" :border-intent="false">
            <img slot="icon" width="26" :src="require('@/assets/images/imgs/dog1.png')">
        </cell>
        <cell class="cell" title="设置" :link="{path:'./index'}" :border-intent="false">
            <img slot="icon" width="26" :src="require('@/assets/images/imgs/dog1.png')">
        </cell>
    </Group>
</template>

<script>
import { Group, Cell } from "vux";
export default {
  name: "index",
  components: {  Group, Cell },
};
</script>
复制代码

Cell 组件二

<style lang="scss">
  .cell {
    padding-top: 15px;
    padding-bottom: 15px;
    .cell-img {
      display: block;
      margin-right: 15px;
    }
    .name,,desc{
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden; 
    }
    .name {
      color: #000;
      margin-bottom: 4px;
    }
    .desc {
      color: #aaa;
      font-size: 12px;
    }
  }
</style>

<template>
    <Group>
      <cell class="cell" v-for="(item,index) in cellList" :key="index" :link="{path:'./index'}" value-align="left">
        <img class="cell-img" slot="icon" width="40" :src="item.icon">
        <p class="name">{{item.name}}</p>
        <p class="desc">{{item.desc}}</p>
      </cell>
    </Group>
</template>

<script>
import { Group, Cell } from "vux";
export default {
  name: "index",
  components: {  Group, Cell },
  data() {
    return {
      cellList: [
        {
          name: "朋友圈",
          desc: "点击进入朋友圈",
          icon: require("../../assets/images/imgs/dog1.png"),
        },
        {
          name: "扫一扫",
          desc: "点击进入扫一扫",
          icon: require("../../assets/images/imgs/dog2.png")
        },
        {
          name: "摇一摇",
          desc: "点击进入摇一摇",
          icon: require("../../assets/images/imgs/dog3.png"),
        },
        {
          name: "看一看",
          desc: "点击进入看一看",
          icon: require("../../assets/images/imgs/dog4.png")
        }
      ],
    }
  } 
};
</script>
复制代码

Cell 组件三模仿微信

<style lang="scss">
  .cell {
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    &:active {
      background-color: #ddd;
    }
    .cell-img {
      display: block;
      margin-right: 15px;
    }
    .badge {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 6px;
      left: 59px;
      z-index: 1;
    }
    .name,,desc{
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden; 
    }
    .name {
      font-size: 17px;
      color: #000;
      margin-bottom: 5px;
      padding-right: 50px;
    }
    .desc {
      color: #aaa;
      font-size: 13px;
      padding-right: 45px;
    }
    .time {
      position: absolute;
      top: 13px;
      right: 10px;
      z-index: 1;
      font-size: 12px;
      clear: #aaa;
    }
    .state {
      width: 18px;
      height: 18px;
      position: absolute;
      bottom: 12px;
      right: 10px;
      z-index: 1;
    }
  }
</style>

<template>
  <Group>
    <cell class="cell" v-for="(item,index) in cellList" :key="index" value-align="left" :border-intent="false" @click.native="goDetail">
      <em class="badge" v-show="item.showBadge"></em>
      <img class="cell-img" slot="icon" width="50" :src='item.img'>
      <p class="name">{{item.name}}</p>
      <p class="desc">{{item.desc}}</p>
      <span class="time">{{item.time}}</span>
      <img class="state" v-show="item.showShield" :src="require('@/assets/images/imgs/state.png')" alt="">
    </cell>    
  </Group> 
</template>

<script>
import { Group, Cell } from "vux";
export default {
  name: "index",
  components: {  Group, Cell },
  data() {
    return {
      cellList: [
        {
          name: "我要你在我身旁，我要你为我梳妆，夜的风儿吹",
          desc: "我要你在我身旁，我要你为我梳妆，夜的风儿吹，吹得心痒痒",
          img: require("../../assets/images/imgs/dog1.png"),
          time: "下午5:34",
          showBadge: false,
          showShield: false
        },
        {
          name: "爸爸",
          desc: "[1条]吃饭了吗？",
          img: require("../../assets/images/imgs/dog2.png"),
          time: "上午10::18",
          showBadge: true,
          showShield: true
        },
        {
          name: "妈妈",
          desc: "[2条]睡觉了吗？",
          img: require("../../assets/images/imgs/dog3.png"),
          time: "昨天",
          showBadge: true,
          showShield: false
        },
        {
          name: "室友",
          desc: "[6条]点名了吗？",
          img: require("../../assets/images/imgs/dog4.png"),
          time: "7月10日",
          showBadge: true,
          showShield: true
        }
      ]
    };
  },
  methods: {
    goDetail() {
      this.$router.push({ path: "/detial" });
    }
  }
};
</script>
复制代码

四. 自己写

<style lang="scss">
.test {
  margin: 10px 0;
  .ul {
    background-color: #fff;
    .li {
      display: -webkit-flex;
      display: flex;
      &:active {
        background-color: #f2f2f2;
      }
      &:nth-last-of-type(1){
        .right{
          &:after{
            height: 0;
            border-bottom: 0px solid #f2f2f2;
            color: #f2f2f2;
          }
        }
      }
      .left {
        width: 80px;
        position: relative;
        img {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 1;
          transform: translate(-50%, -50%);
        }
      }
      .right {
        flex: 1;
        position: relative;
        &:after{
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 1px;
          border-bottom: 1px solid #dddddd;
          color: #dddddd;
          transform-origin: 0 100%;
          transform: scaleY(0.5);
        }
        .name {
          color: #999;
          font-size: 12px;
          margin: 12px 0;
        }
        .desc {
          color: #000;
          font-size: 15px;
          margin: 12px 0;
          a {
            color: #000;
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="test">
    <ul class="ul">
      <li class="li" v-for="(item,index) in addressList" :key="index">
        <div class="left">
          <img :src="item.icon">
        </div>
        <div class="right">
          <p class="name">{{item.name}}</p>
          <p class="desc"><a :href="'tel:'+item.content">{{item.content}}</a></p>
        </div>
      </li>          
    </ul> 
  </div>
</template>

<script>
export default {
  name: "test",
  props: {
    addressList: {
      type: Array,
      default: () => [
        { name: "我的电话", icon: "http://gplove.top/dog1.png", content: "158695263654" },
        { name: "父亲电话", icon: "http://gplove.top/dog2.png", content: "135991777177" },
        { name: "母亲电话", icon: "http://gplove.top/dog3.png", content: "186959955888" }
      ]
    }
  },
  data() {
    return {}
  },
};
</script>

复制代码