uniapp 开发微信小程序总结（六）实用组件

empty.vue 页面为空时组件

<template>
    <view class="flex flex-direction justify-center align-center" :style="{'margin-top': top}">
        <image :style="{height: imageHeight}" src="/static/empty.png" mode="aspectFit"></image>
        <view class="text-black text-sm margin-top-sm">
            {{noContent}}
        </view>
        <view class="margin-top-sm" @click="goPage" v-if="linkText">
            <text class="text-red text-df margin-right-xs">{{linkText}}</text>
            <text class="cuIcon-roundright text-red text-df"></text>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            noContent:String,
            linkText:String,
            imageHeight:{
                type:String,
                default:"150px"
            },
            top:{
                type:String,
                default:"150px"
            }
        },
        methods:{
            goPage(){
                this.$emit('click')
            }
        }
    }
</script>

<style>
</style>

float-button.vue 悬浮按钮（跳转首页）

<template>
    <view class="home-btn" @click.stop="goHome">
        <image src="/static/home-icon.png" mode="aspectFit" style=""></image>
    </view>
</template>

<script>
    export default{
        methods:{
            goHome(){
                uni.switchTab({
                    url:"/pages/index/index"
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .home-btn{
        position: fixed;
        right: 38upx;
        bottom: 100upx;
        76upx;
        height:76upx;
        overflow: hidden;
        z-index:5;
        image{
             100%;
            height: 100%;
        }
    }
</style>

loadMore.vue （加载更多）

<template>
    <view class="margin-tb flex justify-center"v-show="isShow">
        <view class="cu-load loading" v-show="isLoad"></view>
        <view class="aimer-footer align-center" v-show="!isLoad">
            <image src="/static/footer-aimer.png" mode="aspectFit"></image>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            isLoad:Boolean,
            isShow:Boolean
        }
    }
</script>

<style lang="scss" scoped>
    .aimer-footer{
         500upx;
        height: 30upx;
        image{
             100%;
            height: 100%;
        }
    }
    .cu-load.loading{
        color: #666;
    }
    .cu-load.loading::before {
        content: "e67a";
        animation: cuIcon-spin 1s infinite linear;
        color: #999;
    }
</style>

htmlContent.vue （后台使用的是vue-quill-editor 富文本编辑器组件，小程序中展示时，需要使用 uniapp插件 jyfParser 和 npm 包 quill 显示）

<template>
<div class="padding-lr" style=" 750upx;">
     <div class="ql-container ql-snow">
         <div class="ql-editor">
             <jyf-parser :html="content" ref="article" @parse="parse" @ready="ready" @linkpress="linkpress"></jyf-parser>
        </div>
     </div>
 </div>
</template>

<script>
import jyfParser from "@/components/jyf-parser/jyf-parser"
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {navigatorToPage} from '@/common/index.js'
export default {
    components:{
        jyfParser
    },
    props: {
        content: String
    },
    methods:{
        parse(){
            uni.showLoading({
                title:"加载中"
            })
        },
        ready(){
            uni.hideLoading()
            this.$emit('ready')
        },
        linkpress(e){
            if(e.href){
                e.ignore()
                navigatorToPage(e.href,2)
            }
        }
    }
};
</script>

<style scoped>
    .ql-container.ql-snow{
        border-0;
        height: auto;
        min-height: auto;
    }
    .ql-editor{
        padding: 0;
    }
</style>

imt-calendar.vue （uniapp 插件市场的插件修改的）

<template>
    <view class="imt-calendar">
        <view class="calendar-month-wrapper align-center padding-lr">
            <view class="calendar-icon" @click="current&&current--">
                <image src="/static/training/evaluation/left-arrow-red-icon.png" mode="aspectFit" v-if="current"></image>
                <image src="/static/training/evaluation/left-arrow-icon.png" mode="aspectFit" v-else></image>
            </view>
            <view class="calendar-month">{{currentTime}}</view>
            <view class="calendar-icon" @click="current == calendar.length-1 || current++">
                <image src="/static/training/evaluation/right-arrow-icon.png" mode="aspectFit" v-if="current == calendar.length-1"></image>
                <image src="/static/training/evaluation/right-arrow-red-icon.png" mode="aspectFit" v-else></image>
            </view>
        </view>
        <view class="calendar-week-wrapper justify-center">
            <view class="calendar-week" v-for="(item,index) in week" :key="index">{{item}}</view>
        </view>
        <swiper class="calendar-date-swiper" :current="current" @change="current = $event.detail.current">
            <swiper-item class="calendar-date-wrapper" v-for="(item,index) in calendar" :key="index">
                <view class="calendar-date" v-for="(value,key) in item" :key="key" @click="onclick(value.selected,value.date)" :style="{background:value.selected&&color,color:value.selected&&'#fff'}">{{value.date}}</view>
                <view class="calendar-date" v-for="item in (35-item.length)"></view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                week: ['日', '一', '二', '三', '四', '五', '六'],
                current: '',
                startYear: '',
                startMonth: '',
                calendar: []
            }
        },
        props: {
            selected: Array,
            color: {
                type: String,
                default: '#EC2C5A'
            }
        },
        
        methods: {
            init() {
                let year = new Date().getFullYear()
                let month = new Date().getMonth()
                this.startYear = this.selected.length ? this.selected[0].substr(0, 4) : `${year}`
                this.startMonth = this.selected.length ? this.selected[0].substr(5, 2) - 1 : month
                this.calendar = [...Array((year - this.startYear) * 12 + month - this.startMonth + 1).keys()].map(i => this.getDate(
                    this.format(i)))
                this.selected.forEach(i => {
                    let time = i.split('-')
                    this.calendar[time[1] - this.startMonth - 1 + (time[0] - this.startYear) * 12][time[2] - 1 + new Date(
                        `${time[0]}-${time[1]}`).getDay()].selected = true
                })
                this.current = this.calendar.length - 1
            },
            getDate(e) {
                let time = e.split('-')
                return [...Array(new Date(`${time[0]}-${time[1]}`).getDay())].map(i => ({
                    date: ''
                })).concat([...Array([4, 6, 9, 11].includes(time[1] * 1) ? 30 : (time[1] != 2 ? 31 : (time[0] % 4 == 0 ? 29 : 28)))
                    .keys()
                ].map(i => ({
                    date: i + 1
                })))
            },
            format(e) {
                let time = new Date(new Date(this.startYear).setMonth(this.startMonth + e))
                return `${time.getFullYear()}-${(time.getMonth()<9 && '0')+(time.getMonth()+1)}`
            },
            // formatChar(e) {
            //     let time = new Date(new Date(this.startYear).setMonth(this.startMonth + e))
            //     return `${time.getFullYear()}年${(time.getMonth()<9 && '0')+(time.getMonth()+1)}月`
            // }
            onclick(isSelected,day){
                if(isSelected){
                    day = Number(day)<10?('0'+day):day;
                    this.$emit('click',{date:this.currentTime+'-'+day})
                }
            }
        },
        computed: {
            currentTime() {
                return this.format(this.current)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .imt-calendar {
         690upx;
        padding-left: 10upx;
        padding-right: 10upx;
        margin: auto;
        background: #fff;
        text-align: center;
        background:rgba(255,255,255,1);
        box-shadow:0upx 8upx 10upx 0upx rgba(182, 184, 183, 0.35);
        border-radius:18upx;
    }

    .calendar-month-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .calendar-icon {
         35upx;
        height:35upx;
        
        image{
             100%;
            height:100%; 
        }
    }

    .calendar-month {
        font-size: 32upx;
        line-height: 100upx;
        color: #EC2C5A;
    }

    .reserve {
        transform: rotate(180deg);
    }

    .calendar-week-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .calendar-week {
        font-size: 32upx;
         48upx;
        height: 48upx;
        margin: 14upx 20upx;
        color: #2E2F2F;
    }

    .calendar-date-swiper {
        height: 500upx;
    }

    .calendar-date-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .calendar-date {
         48upx;
        height: 48upx;
        font-size: 32upx;
        line-height: 48upx;
        border-radius: 50%;
        margin: 14upx 20upx;
        color: #111111;
    }
</style>

ruler.vue 量尺组件

<template>
    <view class="box">
        <text class="cursor"></text>
        <scroll-view scroll-x="true" :scroll-left="salNum" scroll-with-animation="true" @scroll="bindscroll" style="height:150rpx">
            <view class="scroller" :style="{scaleWidth}" >
                <text v-for="(item,index) in count" :key="index" :class="{big:(((item+min)*step)% bigStep == 0), middle:(((item+min)*step) % middleStep == 0) }">
                    <text v-if="(item+min)%10==0" class="scale_txt">{{(item + min) * step * currentStep}}</text>
                </text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default{
        props:{
            min:{
                type: Number,
                default: 0
            },
            max:{
                type: Number,
                default: 200
            },
            def:{
                type: Number,
                default: 30
            },
            currentStep:{
                type: Number,
                default: 1
            },
        },
        data(){
            return{
                curVal: 0,//当前值
                middleStep: 5,
                bigStep: 10,
                cellW: 10,
                scaleWidth: "100px",
                count: 300,
                salNum: 0,
                step: 1 //步长 每格代表的值
            }
        },
        created() {
            //一共有多少格
            this.$nextTick(()=>{
                let count = Math.ceil((this.max - this.min) / this.step) + 1;
                this.count = count;
                this.scaleWidth = (count * this.cellW) + 'px';
                this.salNum = (this.def - this.min) / this.step *  this.cellW;
                //初始值
                this.setVal(this.salNum);
            })
        },
        methods:{
            bindscroll(e){
                // 移动距离
                let left = e.detail.scrollLeft;
                this.setVal(left);
            },
            setVal(left){
                let curVal = Math.round( left / this.cellW / this.step ) + this.min;
                this.curVal = curVal > this.max ? this.max : (curVal < this.min ? this.min : curVal)
                this.$emit('slide',{"curVal":this.curVal});
            },
            setDefVal(){
                //初始值
                this.salNum = (this.curVal - this.min) * this.cellW * this.step
            }
        }
    }
</script>

<style lang="scss" scoped>
    /*
    *滑动标尺样式
    */
    .box {
         90%;
        height: 140upx;
        margin:10upx auto 60upx;
        overflow: hidden;
        position: relative;
    }
    .cursor {
        position: absolute;
        top: 40upx;
        left: 50%;
         6upx;
        height: 44upx;
        background-color: #EC2C5A;
        transform: translate(-50%,0);
        z-index: 9
    }
    .wrapper {
         100%;
        margin-top: 0upx;
    }
    .scroller{
        //  1500upx;
        padding: 40upx 47% 40upx 50%;
        // transition: all 1s;
        white-space: nowrap;
    }
    .scroller>text{
        font-size: 20upx;
        color: #CCCCCC;
        display: inline-block;
         9px;
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        height: 14upx;
        vertical-align: top;
        position: relative;
    }
    .scroller>text:last-of-type{
        border-bottom: 0upx;
    }
    .scroller .scale_txt{
        font-size: 26upx;
        font-style: normal;
        position: absolute;
        bottom: -40upx;
        left: -8px;
        color: #111111;
    }
    .scroller .middle{
        height: 28upx;
    }
    .scroller .big{
        height: 44upx;
    }
</style>