多項(xiàng)選擇器checkbox-group

多項(xiàng)選擇器，內(nèi)部由多個 checkbox 組成。

		<checkbox-group>
			<checkbox checked color="red" value="1"></checkbox> 籃球
			<!-- disabled:是否禁用 -->
			<checkbox disabled color="rgba(0,0,0,0.5)" value="2"></checkbox> 足球
			<checkbox color="rgb(0,0,0)" value="3"></checkbox> 排球
		</checkbox-group>

屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

效果圖展示

單行輸入框input

		<input type="text" placeholder="給個提示">
		<input type="text" v-model="msg">
		<input type="text" :value="msg">
		<!-- password:密碼格式 maxlength:設(shè)置最大數(shù) -->
		<input type="text" password value="123456" maxlength="6">

屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

效果圖展示

單項(xiàng)選擇器radio-group

單項(xiàng)選擇器，內(nèi)部由多個 radio 組成。通過把多個radio包裹在一個radio-group下，實(shí)現(xiàn)這些radio的單選。

		<radio-group @change="handlechange">
			<radio value="1" disabled ></radio>籃球
			<radio value="2" checked color="red"></radio>足球
			<radio value="3"></radio>乒乓球
			<radio value="4"></radio>排球
		</radio-group>

屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

效果圖展示

滑動條slider

滑動選擇器

		<view >
			<view>{{slidervalue}}</view>
			<slider @changing="sliderChange" min="0" max="100" value="0" step="1"/>
		</view>

屬性說明（查看更多屬性請查看官網(wǎng) [| uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

效果圖展示（設(shè)置滑動條 @change:不是實(shí)時(shí)改變的 @changing:滑動條的位置實(shí)時(shí)改變）

滾動選擇器picker-view

嵌入頁面的滾動選擇器。

相對于picker組件，picker-view擁有更強(qiáng)的靈活性。當(dāng)需要對自定義選擇的彈出方式和UI表現(xiàn)時(shí)，往往需要使用picker-view。

		<view>
			<view class="uni-padding-wrap">
				<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
			</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>

屬性說明（查看更多請查看官網(wǎng)picker-view | uni-app官網(wǎng) (dcloud.net.cn) ）

script部分

<script>
    export default {
        data: function () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            }
        }
    }
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-800322.html

到了這里，關(guān)于uni-app的組件（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！