第一步：
先下载 uview UI 框架
第二步：
可以直接粘贴使用（只不过要修改一下样式根据自己的需要）
有 （输入框，Picker 选择器，Radio 单选框，Checkbox 复选框，Textarea 文本域，Overlay 遮罩层 ，Popup 弹出层，Switch 开关选择器，Tabs 标签， DatetimePicker 选择器，加载中...， Button 按钮，自定义导航栏,底部导航栏）
插件 （查看PDF的，和 自滚动组件 ）
// 自滚动组件 npm i vue-seamless-scroll -save
查看PDF的 插件市场 --- 移动端-H5-小程序在线预览pdf，图片，视频 - DCloud 插件市场
引入包 在你的项目中 路径已经写啦！
里面有详细的说明
<template>
<view class="">
<!-- 导航栏 必须写在前面 height="100" placeholder suffixIcon（uview 图标库) suffixIconStyle （icon颜色）-->
<view class="navbar-icon">
<u-navbar leftText="返回" @leftClick="leftClicks" title="202房间配餐" placeholder>
<view class="u-nav-slot" slot="right">
<view @click="pickerShowInput = true">
<u--input suffixIcon="list-dot" suffixIconStyle="color: #02A7F0" disabled class="navbar-active" placeholder="请选择内容" v-model="navbarValue"></u--input>
<u-picker @cancel="pickerShowInput = false" @confirm="navbarPickerValue" :show="pickerShowInput" :columns="navbarColumns"></u-picker>
</view>
</view>
</u-navbar>
</view>
<!-- 导航栏end -->
<!-- 滚动组件的使用 warnings 必须和循环的数据保持一样 classOption 计算属性中的东西 可以给自定义样式-->
<vue-seamless-scroll :data="warnings" :class-option="classOption">
<view class="" v-for="(item, index) in warnings" :key="item.id">
{{ item.name }}
</view>
</vue-seamless-scroll>
<!-- 滚动组件的使用end -->
<!-- 输入框 -->
<u--input maxlength="50" placeholder="请输入内容" v-model="inputValue"></u--input>
<!-- 输入框 end -->
<!-- Picker 选择器 -->
<view @click="show = true">
<u--input disabled class="active" placeholder="请选择内容" v-model="showValue"></u--input>
<u-picker @cancel="show = false" @confirm="confirmValue" :show="show" :columns="columns"></u-picker>
</view>
<!-- Picker 选择器end-->
<!-- Radio 单选框 -->
<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"></u-radio>
</u-radio-group>
<!-- Radio 单选框end -->
<!-- Checkbox 复选框 -->
<view>
<u-checkbox-group iconPlacement="left" v-model="checkboxValue1" placement="column" @change="checkboxChange">
<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"></u-checkbox>
</u-checkbox-group>
</view>
<!-- Checkbox 复选框end -->
<!-- Textarea 文本域 height autoHeight maxlength -->
<u--textarea height="100" autoHeight maxlength="1000" count v-model="value1" placeholder="请输入内容"></u--textarea>
<!-- Textarea 文本域 height autoHeight maxlength end -->
<!-- Overlay 遮罩层 @click="show = false"-->
<u-overlay :show="overlayShow">
<view class="warp">
<view class="rect" @tap.stop="overlayShow = false">关闭</view>
</view>
</u-overlay>
<view class="" @click="overlayShow = true">打开遮罩</view>
<!-- Overlay 遮罩层end -->
<!-- Popup 弹出层 round mode="top"-->
<view>
<u-popup safeAreaInsetBottom closeable :round="10" :show="popupShow" @close="close" @open="open">
<view class="heght">
<text>出淤泥而不染，濯清涟而不妖</text>
</view>
</u-popup>
<u-button @click="popupShow = true">打开</u-button>
</view>
<!-- Popup 弹出层 end-->
<!-- Switch 开关选择器 asyncChange-->
<view class="">
<u-switch asyncChange v-model="switchCalue" @change="change"></u-switch>
</view>
<!-- Switch 开关选择器end -->
<!-- Button 按钮 :plain="true"（细边） disabled icon="map" loading loadingText="加载中"-->
<view class="">
<u-button :plain="true" icon="map" shape="circle" type="primary" text="确定"></u-button>
<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
<!-- -->
</view>
<!-- Button 按钮 end -->
<!-- Tabs 标签 -->
<view class="">
<u-tabs
:list="list4"
lineWidth="30"
lineColor="#f56c6c"
:activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)'
}"
:inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
></u-tabs>
</view>
<!-- Tabs 标签end -->
<!-- DatetimePicker 选择器 mode="date"-->
<view class="">
<view class="col-6" @click="pickerShowTime = true">
<u--input class="active" disabled placeholder="请选择日期" :value="formatDate(tasktime)" suffixIcon="calendar" suffixIconStyle="color: #909399"></u--input>
<u-datetime-picker
:min-date="Number(new Date('2021-01-01'))"
:max-date="Number(new Date('2035-01-01'))"
:show="pickerShowTime"
:formatter="formatter"
v-model="tasktime"
@cancel="cancel"
mode="datetime"
@confirm="confirm"
></u-datetime-picker>
</view>
</view>
<!-- DatetimePicker 选择器end -->
<!-- 加载中... vertical可以指定文字和图标是否垂直排列-->
<view class="">
<u-overlay :show="loadingShow">
<view class="warp">
<view class="rect1">
<u-loading-icon vertical color="white" textColor="white" text="加载中..." textSize="14"></u-loading-icon>
</view>
</view>
</u-overlay>
<view class="" @click="loadingShow = true">打开遮罩加载中...</view>
</view>
<!-- 加载中... end-->
<view class=""></view>
<!-- 底部导航栏 activeColor="#d81e06"（激活的颜色）inactive-icon（平常的样式）active-icon(激活的样式) fixed(固定底部) placeholder(生成一个等高元素防止塌陷) safeAreaInsetBottom（ 是否为iPhoneX留出底部安全距离）-->
<u-tabbar activeColor="#d81e06" :border="false" :value="tabbarValue1" @change="tabbarChange1" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="首页">
<image class="u-page__item__slot-icon" slot="active-icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="https://cdn.uviewui.com/uview/common/bell.png"></image>
</u-tabbar-item>
<u-tabbar-item text="放映厅" @click="tabbarItemclick1" icon="photo"></u-tabbar-item>
<u-tabbar-item text="直播" @click="tabbarItemclick1" icon="play-right"></u-tabbar-item>
<u-tabbar-item text="我的" @click="tabbarItemclick1" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- 底部导航栏end -->
<!-- 预览PDF fileType 1.预览图片，2.预览文件，3.预览视频 fileUrl 预览单个文档或视频传递url -->
<!-- <ss-preview :fileType="fileType" :fileUrl="fileUrl"></ss-preview> -->
<!-- 预览PDF 可以直接在插件市场引入看效果 -->
</view>
</template>
<script>
// 滚动组件 npm i vue-seamless-scroll -save
import vueSeamlessScroll from 'vue-seamless-scroll';
// 滚动组件
// 预览 PDF 需要在官网引入 https://ext.dcloud.net.cn/plugin?id=11924 直接把包引入到你的项目中
// import ssPreview from '@/uni_modules/ss-preview/components/ss-preview/ss-preview.vue';
// 预览PDF end
export default {
//注册滚动组件
components: {
vueSeamlessScroll
// ssPreview
},
// 计算属性
computed: {
// 计算属性方法配置方式
classOption() {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
};
}
},
data() {
return {
// 自动滚动数据 一个数组（或者数组包含对象）
warnings: [
{
id: 1,
name: '李四1'
},
{
id: 2,
name: '李四2'
},
{
id: 3,
name: '李四3'
},
{
id: 6,
name: '李四4'
},
{
id: 4,
name: '李四5'
},
{
id: 5,
name: '李四6'
}
],
// 输入框
inputValue: '',
// Textarea 文本域
value1: '',
// Picker 选择器
show: false,
columns: [['中国', '美国', '日本']],
showValue: '',
showValueIndex: '',
// Picker 选择器 end
// Radio 单选框
radiolist1: [
{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '橙子',
disabled: false
},
{
name: '榴莲',
disabled: false
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
radiovalue1: '苹果',
// Radio 单选框 end
// Checkbox 复选框
checkboxValue1: ['苹果', '香蕉'],
// 基本案列数据
checkboxList1: [
{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '橙子',
disabled: false
}
],
// Checkbox 复选框end
// Overlay 遮罩层
overlayShow: false,
// Overlay 遮罩层end
// Popup 弹出层
popupShow: false,
// Popup 弹出层end
// Switch 开关选择器
switchCalue: false,
// Switch 开关选择器end
// Tabs 标签
list4: [
{
name: '关注'
},
{
name: '推荐',
badge: {
isDot: true
}
},
{
name: '电影'
},
{
name: '科技'
},
{
name: '音乐'
},
{
name: '美食'
},
{
name: '文化'
},
{
name: '财经'
},
{
name: '手工'
}
],
// Tabs 标签 end
// DatetimePicker 选择器
pickerShowTime: false,
tasktime: Number(new Date()),
// DatetimePicker 选择器end
// 加载中...
loadingShow: false,
// 加载中...end
// pickerShowInput 导航栏
pickerShowInput: false,
navbarColumns: [['导航', '导航1', '导航2']],
navbarValue: '',
// pickerShowInput 导航栏 end
// 底部导航栏
tabbarValue1: 3 //(匹配标签的名称 0---3 默认的 可以传组件使用)
// 底部导航栏end
};
},
methods: {
// Picker 选择器
confirmValue(e) {
// 需要传给后端 根据需要
this.showValueIndex = e.indexs[0] + 1;
this.showValue = e.value[0];
this.show = false;
},
// Picker 选择器 end
// Radio 单选框
groupChange(e) {
console.log(e);
},
// Radio 单选框end
// Checkbox 复选框
checkboxChange(n) {
console.log('change', n);
},
// Checkbox 复选框end
// Popup 弹出层
open() {
// console.log('open');
this.popupShow = true;
},
close() {
this.popupShow = false;
// console.log('close');
},
// Popup 弹出层 end
// 异步控制弹窗 Switch 开关选择器
change(e) {
uni.showModal({
content: e ? '确定要打开吗' : '确定要关闭吗',
success: (res) => {
if (res.confirm) {
this.switchCalue = e;
}
}
});
},
// 异步控制弹窗 Switch 开关选择器end
// DatetimePicker 选择器
// 确定
confirm(e) {
this.tasktime = e.value;
this.pickerShowTime = false;
},
// 取消
cancel() {
this.pickerShowTime = false;
},
formatDate(data) {
let date = new Date(data);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
month = month > 9 ? month : '0' + month;
day = day < 10 ? '0' + day : day;
hours = hours > 9 ? hours : '0' + hours;
minutes = minutes > 9 ? minutes : '0' + minutes;
seconds = seconds > 9 ? seconds : '0' + seconds;
// 格式调整
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
formatter(type, value) {
const typeMap = {
year: '年',
month: '月',
day: '日',
hour: '时',
minute: '分',
second: '秒'
};
return typeMap[type] ? `${value}${typeMap[type]}` : value;
},
// DatetimePicker 选择器end
// 导航栏
leftClicks() {
// 返回上一层
uni.navigateBack();
},
navbarPickerValue(e) {
console.log('eenav', e);
console.log('eenav', e.value[0]);
this.navbarValue = e.value[0];
this.pickerShowInput = false;
},
// 导航栏end
// 底部导航栏
tabbarChange1(name) {
console.log('底部导航栏index', name);
// 给激活的索引 ---name
this.tabbarValue1 = name;
},
tabbarItemclick1(name) {
console.log('底部导航栏item--index', name);
}
// 底部导航栏end
}
};
</script>
<style scoped lang="less">
// Picker 选择器
.active {
background-color: #fff !important;
}
// Picker 选择器 end
// Overlay 遮罩层
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
// Overlay 遮罩层end
// Popup 弹出层
.heght {
height: 80vh;
}
// Popup 弹出层end
// 导航栏
.u-nav-slot {
width: 65%;
}
.navbar-active {
background-color: #fff !important;
height: 44rpx !important;
}
/deep/ .u-navbar__content__right {
right: -170rpx !important;
margin-left: 20rpx !important;
}
/deep/ .u-navbar__content__title {
// position: absolute !important;
// left: 216rpx !important;
text-align: left !important;
width: 220rpx !important;
}
// 导航栏 end
// 底部导航栏
/deep/ uni-image {
width: 36rpx !important;
height: 36rpx !important;
}
// 底部导航栏end
</style>
注意一点：
写导航栏的时候 记得要自定义的 ！！！ -------pagesjson
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom", // 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
}
}
],以上就是 常用的框啦！
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
