uni-app 基础之常用组件（2）基础内容

一、text文本

<template>
    <view>
        <view>
            我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森林防火施蒂利克复合大师科技发货了上课的恢复上课了方式
        </view>
        <view class=”txt1″>
            txt1我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森林防火施蒂利克复合大师科技发货了上课的恢复上课了方式
        </view>
        <view class=”txt2″>
            txt2我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森林防火施蒂利克复合大师科技发货了上课的恢复上课了方式
        </view>
        <!– text 是块内元素，直接显示不会另起一行 –>
        <text class=”txt2″>02-我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森</text>
        <text>03-我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货</text>
    </view>
</template>

<style>
    /* 将text元素从行内元素设置为行内块元素 占满行 */
    text {
        display: block;
    }
    .txt1 {
        color: red;
    }

    .txt2 {
        color: blue;
        /* 隐藏一行后面文字 前提要设置文本不能换行 */
        overflow: hidden;
        white-space: nowrap;
        /* 文字隐去多余部分用。。。代替 */
        text-overflow: ellipsis;
        /* 给文字设置阴影 */
        text-shadow: 2px 2px 5px #4CD964;
    }
</style>

效果图：

二、rich-text富文本(富文本可以解析html标签)

<template>
    <view>
        <!–  rich-text富文本可以直接解析html标签的–>
        <rich-text>我是rich-text富文本，内容不是写在这里显示的</rich-text>
        <rich-text nodes=”我是rich-text富文本，内容是写在nodes中显示的”></rich-text>
        <rich-text nodes=”<h1>标题一</h1><h2>标题2222</h2><h3>标题三</h3>”></rich-text>
        <rich-text nodes=”<h2>清华大学</h2> <br/> <img src=’/static/logo.png’/>”></rich-text>
    </view>
</template>

 效果图：

 三、progress进度条

属性说明：

<template>
    <view>
        <view>dd</view>
        <progress percent=”10″></progress>
        
        <progress percent=”50″></progress>
        <progress percent=”50″ show-info=””></progress>
        <progress percent=”50″ stroke-width=”20″ show-info=””></progress>
        <progress percent=”60″ stroke-width=”20″ show-info=”” color=”red”></progress>
        <!– 进度条从左往右的动画 –>
        <progress percent=”60″ active=”true”></progress>
        <!– activeColor：已选择的进度条的颜色  backgroundColor：未选择的进度条的颜色 –>
        <progress percent=”60″ activeColor=”#4CD964″ backgroundColor=”#DD524D”></progress>
        
    </view>
</template>

<style>
 view{margin: 10px;}
 progress{margin: 10px;}
</style>
效果图：

 四、form表单的提交与重置

<template>
    <view>
        <view>{{select}}</view>
        <!– 设置提交（@submit=”mysubmit）与重置的函数(@reset=”myreset)–>
        <form @submit=”mysubmit” @reset=”myreset”>
            <input type=”text” class=”input1″ name=”username”/>
            <input type=”text” class=”input1″ name=”psw”/>
            <button form-type=”submit”>提交</button>
            <button form-type=”reset”>重置</button>
        </form>
    </view>
</template>

<style>
    view{margin: 10px;}
    input{margin: 5px;}
    button{margin: 5px;}
    .input1 {border: 1px solid #8F8F94;}
</style>
<script>
    export default {
        data() {
            return {
                select:””
            }
        },
        methods: {
            mysubmit:function(e){
                console.log(“出发提交表单函数”)
                var shuju = e.detail.value
                var shuju1 = e.detail.value.username
                var shuju2 = e.detail.value.psw
                console.log(“获取数据 shuju =  “+JSON.stringify(shuju))
                console.log(“获取数据 username =  “+shuju1)
                console.log(“获取数据 psw =  “+shuju2)
                this.select = “username =  “+shuju1+” — psw =  “+shuju2
            },
            myreset:function(e){
                console.log(“出发重置表单函数”)
                uni.showToast({
                    title:”重置信息成功！”
                })
            }
        }
    }
</script>
效果图：

 五、picker普通选择器 、时间选择器、日期选择器

属性说明：

https://uniapp.dcloud.io/component/picker

1.普通选择器

mode = selector

<template>
    <view>
        <form @submit=”mySubmit”>
            <picker :range=”shuiList” :value=”xuaze” @change=”pickerChange” name=”pickname”>
                请选择你需要的水果：{{shuiList[xuaze]}}
            </picker>
            <button form-type=”submit”>提交</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                shuiList: [“香蕉”, “苹果”, “西瓜”, “核桃”],
                xuaze:2
            }
        },
        methods: {
            mySubmit:function(e){
                console.log(“提交内容 data= “+e.detail.value.pickname)
            },
            pickerChange:function(e){
                console.log(“Change内容 data= “+e.detail.value)
                this.xuaze = e.detail.value
            }
        }
    }
</script>

<style>
    view {
        margin: 10px;
    }
</style>
效果图：

 2.时间选择器

mode = time

<template>
    <view>
        <form @submit=”mysubmit”>
            <!– :value=”showtime”绑定默认选择时间 –>
            <picker mode=”time” :value=”showtime” name=”times” @change=”timeChange”>
                选择时间：{{times}}
            </picker>
            <button form-type=”submit”>提交</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showtime:”12:00″,
                times:””
            }
        },
        methods: {
            mysubmit:function(e){
                console.log(“提交时间 time = “+e.detail.value.times)
            },
            timeChange:function(e){
                console.log(“Change时间 time = “+e.detail.value)
                this.times = e.detail.value
            }
        }
    }
</script>

<style>
 view{margin: 10px;}
</style>
效果图：

 3.日期选择器

mode = date

<template>
    <view>
        <form @submit=”mysubmit”>
            <!– :value=”showtime”绑定默认选择时间 –>
            <picker mode=”date” :value=”showtime” name=”times” 
            start=”2020-01-01″ end=”2022-01-01″ @change=”timeChange”>
                选择日期：{{times}}
            </picker>
            <button form-type=”submit”>提交</button>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showtime: “2021-06-01”,
                times: “”
            }
        },
        methods: {
            mysubmit: function(e) {
                console.log(“提交时间 time = ” + e.detail.value.times)
            },
            timeChange: function(e) {
                console.log(“Change时间 time = ” + e.detail.value)
                this.times = e.detail.value
            }
        }
    }
</script>

<style>
    view {
        margin: 10px;
    }
</style>
效果图：

 六、slider滑动选择器相当于A的SeekBar

<template>
    <view>
        <!– 滑动条默认颜色：backgroundColor 、滑动条滑过的颜色：activeColor
         最大值：max、 当前默认值：value 、步长（每次滑动值）：step
         滑块颜色：block-color 、是否显示当前值：show-value–>
        <slider backgroundColor=”#C0C0C0″ activeColor=”#FF0000″
        max=”100″ value=”0″ step=”10″ block-color=”#007AFF”
        show-value=”true” @change=”change1″></slider>
        <view>{{curslider}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                curslider:10
            }
        },
        methods: {
            change1:function(e){
                this.curslider = e.detail.value
            }
        }
    }
</script>

<style>
    view{margin: 10px;}
</style>
效果图：

最后是交流公众号，大家可以关注一下