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 > 复制代码 
)
