页面布局

超出隐藏...

overflow: hidden;
word-break: break-all;  /* break-all(允许在单词内换行。) */
text-overflow: ellipsis;  /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 1; /** 显示的行数 **/

<view class="btn-box">
    <view class="reset" @tap="resetFilterData(page_index)">重置</view>
    <view class="submit" @tap="setFilterData(page_index)">确定</view>
</view>

css:

.btn-box{
　　border-top: 1rpx solid #999;
　　flex-shrink: 0;
　　 100%;
　　height: 82rpx;
　　flex-direction: row !important;
　　align-items: center;
　　justify-content: space-between;
　　>view {
　　 50%;
　　height: 82rpx;
　　align-items: center;
　　justify-content: center;
}
.reset {
　　color: #578EEE;
}
.submit {
　　color: #fff;
background-color: #578EEE;
}
}

组件使用

<list :tab="tabList" :activeIndex="activeIndex" @change="change"></list>


-------------------------

<template>
　　<swiper class="home-swiper" :current="activeIndex" @change="change">
　　<swiper-item v-for="(item ,index) in tab" :key="index" class="swiper-item">
　　<list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore"></list-item>
　　</swiper-item>

　　</swiper>
</template>

--------------------------

import listItem from './list-item.vue'
export default {
components: {
　　listItem
},
props: {
　　tab: {
　　　　type: Array,
　　　　default () {
　　　　　　return []
　　　　}
　　},
　　activeIndex: {
　　　　type: Number,
　　　　default: 0
　　}
},
data() {
　　return {
　　　　list: [],
　　　　// js 的限制 listCatchData[index] = data
　　　　listCatchData: {},
　　　　load: {},
　　　　pageSize: 10
　　};
},
watch: {
tab(newVal) {
if (newVal.length === 0) return
this.listCatchData = {}
this.load = {}
this.getList(this.activeIndex)
}
},
// onLoad 在页面 ，created 组件
created() {
// TODO tab 还没有赋值
// this.getList(0)
uni.$on('update_article',()=>{
this.listCatchData = {}
this.load = {}
this.getList(this.activeIndex)
})
},
methods: {
loadmore() {
if (this.load[this.activeIndex].loading === 'noMore') return
this.load[this.activeIndex].page++
this.getList(this.activeIndex)
},

 删除线

<text class="demo">¥6.51</text>


　　　　　　　　.demo{
                    display: inline-block;
                    color: #999;
                    font-size: .24rem;
                    background-image: url(data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///5mZmf///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==);
                    background-repeat: repeat-x;
                    background-position: left center;
                    height: .32rem;
                    line-height: .32rem;
                }

----------------------

<view class="vueBoxTop">
    <view class="vueBoxTopBox"></view>
</view>

//    顶部
        .vueBoxTop{
             100%;
            height: 500rpx;
            background-color: red;
            background: url('https://sign.myphp.vip/img/avatar/20200508/200508-1588922945692.png')no-repeat top center;
            background-size: 100% 200rpx;
            padding-top: 172rpx;
            //    爱车信息
            .vueBoxTopBox{
                 100%;
                height:493rpx;
                background:rgba(255,255,255,1);
                box-shadow:0rpx 9rpx 19rpx 0rpx rgba(6,0,1,0.09);
                border-radius:15rpx;
                background-color: yellow;
            }
        }

----------------------

.

.