vux Cell組件

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>

複製代碼