UI -- UniApp

UniApp UI

• HBuilder X

• 新建项目 – 默认模板

• pages.json同级

  • components
  • utils
  • views

• components/sl-button/sl-button.vue

<template>
	<view>
		测试123
	</view>
</template>

<script>
	export default {
		name:"sl-button",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

</style>

• views/button/index.vue

<template>
	<div>
		<sl-button></sl-button>
	</div>
</template>

<script>
</script>

<style>
</style>

• utils/function/toast.js

export const toast = (title, duration = 1500) => {
  uni.showToast({
    title,
    icon: 'none',
    duration
  })
}

• utils/index.js

import {toast} from "./functions/toast.js"

const fun = {
  toast
}


export default fun

• main.js

import App from './App'
import sl from './utils/index.js'
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.prototype.$sl = sl
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

• pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages":[
		{
			"root":"views",
			"pages":[   // 页面配置
				{
				  "path": "button/index",
				  "style": {
				    "navigationBarTitleText": "按钮",
				    "h5": {
				      "titleNView": false
				    }
				  }
				}
			]
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"easycom": {    // 组件引入
	 "autoscan": true,
	 "custom": {
	    "^sl-(.*)": "components/sl-$1/sl-$1.vue"
	 }
	},
	"uniIdRouter": {}
}

• pages/index/index.vue

<template>
	<view class="demo">
		<view class="demo-item" v-for="(item, index) in list" :key="index">
			<view class="demo-title">{{ item.title }}</view>
			<view class="demo-content" v-for="(item1, index1) in item.item" :key="index1" @click="clickItem(item1)">
				<view class="demo-content-left">
					<view class="demo-content-left-label">{{ item1.label }}</view>
					<view class="demo-content-left-title">{{ item1.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '基础组件',
					item: [{
						label: 'Button',
						title: '按钮',
						url: '/views/button/index'
					}]
				}]
			}
		},
		onLoad() { 
			console.log(this.$sl.toast)
			this.$sl.toast("测试方法1111")
		},
		methods: {
			clickItem(item) {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@function topx($value) {
  @return $value * 2 + 'rpx'
}
	.demo {
		background: #f7f8fa;
		padding: #{topx(30)} #{topx(25)};

		&-title {
			font-size: 14px;
			color: #909ca4;
			margin-bottom: #{topx(20)};
		}

		&-content {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 #{topx(40)};
			background: #fff;
			height: #{topx(45)};
			background: #fff;
			border-radius: #{topx(22)};
			margin-bottom: #{topx(13)};

			&-left {
				display: flex;
				align-items: center;
				font-weight: 700;
				color: #333;

				&-title {
					margin-left: #{topx(10)};
				}
			}

			&-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: #{topx(30)};
			}
		}
	}
</style>