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>復制代碼

總結

以上是生活随笔為你收集整理的vux Cell组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。