vux 组件打造手机端项目
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种“跳坑”。以下排坑环节。
1、安装vux:cnpm i -S vux; 比较顺利吧。
2、导入组件:
import {ViewBox, XHeader, Tabbar, TabbarItem} from 'vux'export default { name: 'app', components: {ViewBox, XHeader, Tabbar, TabbarItem}}
报错!原因是vux内部样式是用less写的,所以要先安装less-loader!
cnpm install less less-loader --save
3、使用组件
<view-box><x-header :left-options="{backText:''}" title="MACC3.0" :right-options="{showMore:'true'}" slot="header"></x-header><div style="height:650px;"></div><tabbar solt="bottom"><tabbar-item show-dot><img slot="icon" src="./assets/home.png"><span slot="label">首页</span></tabbar-item><tabbar-item badge="2"><img slot="icon" src="./assets/msg.png"><span slot="label">消息</span></tabbar-item><tabbar-item selected><img slot="icon" src="./assets/new.png"><span slot="label">用户</span></tabbar-item></tabbar></view-box>
报错!原因是vux内部有i18n语言包组件,需要配置:
cnpm install vux-loader
webpack.dev.config中加入:
var VuxLoader=require('vux-loader')
baseWebpackConfig=VuxLoader.merge(baseWebpackConfig,{plugins:['vux-ui']})
view-box 页面容器,应该height:100%,所以,它的父级html, body, #app的height:100%;
可以导入vux的重置样式文件:
@import '~vux/src/styles/reset.less';
最后,是不是感觉还是不对劲儿,手机端!index.html 中加入:
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
小提示:webstorm写vue 空格总引发报错,很不爽。找到 webpack.base.config.js文件,注释掉这样就不会再报错了
好了,终于写好个模板例子,直接复制粘贴吧。。。
<template><div id="app"><view-box><x-header :left-options="{backText:''}" title="MACC3.0" :right-options="{showMore:'true'}" slot="header" class="my-header"></x-header><scoller :lock-y="true"><div class="tab"><tab><tab-item selected>已发货</tab-item><tab-item>未发货</tab-item><tab-item>全部订单</tab-item></tab></div></scoller><swiper :list="imgData" v-model="swiperIndex" :loop="true"></swiper><marquee class="my-marquee"><marquee-item>Lorem dolor doloribus earum error ipsa.</marquee-item><marquee-item>totam vel Dignissimos labore quam voluptatum.</marquee-item><marquee-item>consectetur adipisicing elit. Aperiam culpa.</marquee-item><marquee-item>laudantium nesciunt obcaecati omnis similiqu.</marquee-item></marquee>
<panel :list="datalist"></panel><tabbar solt="bottom" style="background-color:#ccc" class="my-header"><tabbar-item show-dot><img slot="icon" src="./assets/home.png"><span slot="label">首页</span></tabbar-item><tabbar-item badge="2"><img slot="icon" src="./assets/msg.png"><span slot="label">消息</span></tabbar-item><tabbar-item selected><img slot="icon" src="./assets/new.png"><span slot="label">用户</span></tabbar-item></tabbar></view-box><!--<router-view></router-view>--></div>
</template><script>
import {ViewBox, XHeader, Tabbar, TabbarItem, Tab, TabItem, Scroller, Swiper, Marquee, MarqueeItem, Panel} from 'vux'
export default {name: 'app',components: {ViewBox,XHeader,Tabbar,TabbarItem,Tab,TabItem,Scroller,Swiper,Marquee,MarqueeItem,Panel},data () {return {imgData: [{url: 'javascript:',img: 'https://static.vux.li/demo/1.jpg',title: '送你一朵fua'}, {url: 'javascript:',img: 'https://static.vux.li/demo/2.jpg',title: '送你一辆车'}, {url: 'javascript:',img: 'https://static.vux.li/demo/3.jpg',title: '送你一次旅行'}],swiperIndex: 0,datalist: [{src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题一',desc: 'Lorem dolor doloribus earum error ipsa.quam quam quam',url: '/component/cell'}, {src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题二',desc: 'totam vel Dignissimos labore similiqu quam quam quam voluptatum.',url: {path: '/component/radio',replace: false}}, {src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题三',desc: 'consectetur adipisicing elit. Aperiam similiqu similiqu similiqu culpa.',url: {path: '/component/radio',replace: false}}, {src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题四',desc: 'laudantium similiqu nesciunt similiqu obcaecati omnis similiqu.',url: {path: '/component/radio',replace: false}}, {src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题五',desc: 'laudantium similiqu nesciunt similiqu obcaecati omnis similiqu.',url: {path: '/component/radio',replace: false}}, {src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',title: '标题六',desc: 'laudantium similiqu nesciunt similiqu obcaecati omnis similiqu.',url: {path: '/component/radio',replace: false}}]}}
}
</script><style lang="less">@import '~vux/src/styles/reset.less';
#app {color:#fff;height:100%;.my-header{position: fixed;width: 100%;z-index: 99;}.tab{margin-top:46px;}
}
html,body{height:100%;margin:0;}.my-marquee{margin-top: 7px;color:#000;}view-box{height:100%;
}</style>
转载于:https://www.cnblogs.com/caolidan/p/7269453.html
vux 组件打造手机端项目相关推荐
- 【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP
在上一篇<13.阿里云IoT Studio WEB监控界面构建>中,我们介绍了用阿里云IoT Studio(原Link Develop)可视化构建WEB界面程序.本篇文章将介绍用阿里云Io ...
- vue+weui 手机端项目
vue+weui 手机端项目 俩个地址 https://weui.io/ https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- 云-移动手机端项目总结
移动端网页的坑坑洼洼 1,flex伸缩布局的坑 flex布局是我在移动端用得最多的一种布局技巧,可成想,在不同的手机浏览器中,它的表现却没那么尽如人意. 先推荐一个可以自动转换css代码的插件(可以兼 ...
- 解决uni-app视频组件h5手机端全屏后无法横屏播放的问题
最近接到需求要做一个内嵌到手机游戏里的web视频播放器,一个视频列表加一个播放页面. 很简单,一会就做好了. 但是遇到了一个问题却困扰了很久,uni-app的video组件在手机端全屏播放视频时居然无 ...
- react手机端项目注意点,ant design-mobile框架
1.先新建一个项目,下载导入react, react-dom, react-router-dom包,如果使用sass预编译就下载导入node-sass,并用后缀名.scss(常用), .sass后缀名 ...
- vue慧招网手机端项目记录
2019独角兽企业重金招聘Python工程师标准>>> 1.全局安装node.js,检查是否安装成功 2.安装git 3.安装vue,检查是否安装成功 4.安装vue-cli,检查是 ...
- 初识Framework7,搭建app手机端项目
写在前面:在Framework7 (以下简称F7)的官方文档中提到"因为Framework7是通过Ajax在不同页面间跳转的,所以你需要启动一个 http 服务器才可以(不要直接打开本地文件 ...
- vue手机端项目自适方案
lib-flexible解决移动端自适应 花了一个多小时终于解决了这个问题,最近总是在研究如何做好自适应,搜了很多方法,但是总是感觉不尽人意,比如以实际尺寸除以75得出rem,或者是那种px乘以二的, ...
最新文章
- Delegate成员变量和Event的区别
- windows聚焦壁纸不更新_技术编辑示范win10系统锁屏壁纸聚焦不更新的处理教程
- SpringSecurity分布式整合之实现思路分析
- apache根据ip分发_腾讯广告进入“IP新融点”时代
- SQL Server 2000优化SELECT语句方法
- 知识图谱入门 , 知识问答
- 0405_hxtx_主题游常用联系人功能代码实现
- centos7系统忘记root密码
- 灾备行业最全常用术语
- mega linux教程,MegaRAID工具使用详解
- 微博十年,再次走到十字路口
- 读书笔记--正面管教
- regedit是什么意思_regedit用法_regedit参数_reg的注册与反注册
- 504_linux内核学习___va_rounded_size宏分析
- 【Educational Codeforces Round 61 (Rated for Div. 2)】A.B.C.D.E.F.G
- tcpdump 安装 使用及详解
- VUE实现简易todos
- 《Fooled by Randomness》读书笔记
- 1 dB压缩点_噪声系数_小信号非线性的数学描述
- 仿soul交友盲盒1.0全开源源码
热门文章
- python空类型-python 空类型
- python打完代码怎么运行-Python的代码是如何去进行运行的?
- python就业方向选择-【经验分享】Python最好的几大就业方向与岗位技能要求!
- python3官方最新下载-Python3.9下载
- python基本使用-python基本用法
- python那么慢为什么还有人用-为什么大家都说python编程的效率速度慢呢?
- python基础语法手册format-Python基础语法-格式化输出
- python翻译程序-python实现翻译word表格小程序
- python一次性读取整个文件-python-文件中的行是否读取整个文件
- python入门需要多久-零基础小白多久能学会python