uniapp学习
1、pages.json设置
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置
以下是一个包含了所有配置选项的 pages.json
{ "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "condition": { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式（list 的索引项） "list": [{ "name": "test", //模式名称 "path": "pages/component/view/index" //启动页面，必选 }] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents":{ "collapse-tree-item":"/components/collapse-tree-item" }, "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染 "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape "rpxCalcMaxDeviceWidth": 960, "rpxCalcBaseDeviceWidth": 375, "rpxCalcIncludeWidth": 750 }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "height": "50px", "fontSize": "10px", "iconWidth": "24px", "spacing": "3px", "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "组件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "接口" }], "midButton": { "width": "80px", "height": "50px", "text": "文字", "iconPath": "static/image/midButton_iconPath.png", "iconWidth": "24px", "backgroundImage": "static/image/midButton_backgroundImage.png" } }, "easycom": { "autoscan": true, //是否自动扫描组件 "custom": {//自定义扫描规则 "^uni-(.*)": "@/components/uni-$1.vue" } }, "topWindow": { "path": "responsive/top-window.vue", "style": { "height": "44px" } }, "leftWindow": { "path": "responsive/left-window.vue", "style": { "width": "300px" } }, "rightWindow": { "path": "responsive/right-window.vue", "style": { "width": "300px" }, "matchMedia": { "minWidth": 768 } } }
2、tabBar设置
"tabBar":{ "list":[ { "pagePath":"pages/index/index", "text":"首页", "selectedIconPath":"static/select_index.png", "iconPath":"static/index.png" }, { "pagePath":"pages/cart/cart", "text":"购物车", "selectedIconPath":"static/select_cart.png", "iconPath":"static/cart.png" }, { "pagePath":"pages/news/news", "text":"新闻", "selectedIconPath":"static/select_news.png", "iconPath":"static/news.png" }, { "pagePath":"pages/member/member", "text":"会员", "selectedIconPath":"static/select_member.png", "iconPath":"static/member.png" } ] }
icon可以去网站上面找 https://www.iconfont.cn/
3、swiper轮播图
<view class="home">
<swiper indicator-dots autoplay>
<swiper-item>
<image src="@/static/pic_1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="@/static/pic_2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="@/static/pic_3.jpg"></image>
</swiper-item>
</swiper>
</view>
<style lang="scss"> .home{ swiper{ width: 750rpx; height: 350rpx; image{ width:100%; height:100%; } } } </style>
官网地址：https://uniapp.dcloud.io/quickstart-hx
今天的文章uniapp学习教程分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/57599.html
