一、text文本

<template>
?? ?<view>
?? ??? ?<view>
?? ??? ??? ?我?guī)煾凳湛罨貜涂祹煾倒_克燒烤粉紅色綠肥紅瘦閃電發(fā)貨森林防火施蒂利克復合大師科技發(fā)貨了上課的恢復上課了方式
?? ??? ?</view>
?? ??? ?<view class="txt1">
?? ??? ??? ?txt1我?guī)煾凳湛罨貜涂祹煾倒_克燒烤粉紅色綠肥紅瘦閃電發(fā)貨森林防火施蒂利克復合大師科技發(fā)貨了上課的恢復上課了方式
?? ??? ?</view>
?? ??? ?<view class="txt2">
?? ??? ??? ?txt2我?guī)煾凳湛罨貜涂祹煾倒_克燒烤粉紅色綠肥紅瘦閃電發(fā)貨森林防火施蒂利克復合大師科技發(fā)貨了上課的恢復上課了方式
?? ??? ?</view>
?? ??? ?<!-- text 是塊內(nèi)元素，直接顯示不會另起一行 -->
?? ??? ?<text class="txt2">02-我?guī)煾凳湛罨貜涂祹煾倒_克燒烤粉紅色綠肥紅瘦閃電發(fā)貨森</text>
?? ??? ?<text>03-我?guī)煾凳湛罨貜涂祹煾倒_克燒烤粉紅色綠肥紅瘦閃電發(fā)貨</text>
?? ?</view>
</template>

<style>
?? ?/* 將text元素從行內(nèi)元素設置為行內(nèi)塊元素 占滿行 */
?? ?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富文本，內(nèi)容不是寫在這里顯示的</rich-text>
?? ??? ?<rich-text nodes="我是rich-text富文本，內(nèi)容是寫在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）與重置的函數(shù)(@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("出發(fā)提交表單函數(shù)")
?? ??? ??? ??? ?var shuju = e.detail.value
?? ??? ??? ??? ?var shuju1 = e.detail.value.username
?? ??? ??? ??? ?var shuju2 = e.detail.value.psw
?? ??? ??? ??? ?console.log("獲取數(shù)據(jù) shuju = ?"+JSON.stringify(shuju))
?? ??? ??? ??? ?console.log("獲取數(shù)據(jù) username = ?"+shuju1)
?? ??? ??? ??? ?console.log("獲取數(shù)據(jù) psw = ?"+shuju2)
?? ??? ??? ??? ?this.select = "username = ?"+shuju1+" --- psw = ?"+shuju2
?? ??? ??? ?},
?? ??? ??? ?myreset:function(e){
?? ??? ??? ??? ?console.log("出發(fā)重置表單函數(shù)")
?? ??? ??? ??? ?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("提交內(nèi)容 data= "+e.detail.value.pickname)
?? ??? ??? ?},
?? ??? ??? ?pickerChange:function(e){
?? ??? ??? ??? ?console.log("Change內(nèi)容 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>
效果圖：

?

最后是交流公眾號，大家可以關(guān)注一下

?

總結(jié)

以上是生活随笔為你收集整理的uni-app 基础之常用组件（2）基础内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。