uni-app 项目笔记 基础配置及scroll-view左右滚动效果
一直想用uni来做个项目,这次公司有新项目,我决定用uni来写,虽然自己学的还不是很熟。感觉只有在项目中才能更好的学习,所以记下在项目中遇到的一些要点。
第一步:新建项目我就不写了,当项目建好后会生成很多文件,我就拿几个常用的来说下,先看下图片:
- components 文件是存放组件的地方,组件都是根据项目需求自己对代码进行抽离。
- icon 文件 不是项目自动生成的,是自己建立的,用于引用图标库
- pages 文件是存放页面的,和微信小程序里面的一样
- static 文件是存放项目中的图片
- manifest.json 是配置文件,主要配置APP、 H5 、各类小程序、
- pages.json 是配置页面底部导航栏和页面。个人感觉这个配置挺好的,比小程序要好点。
- uni.scss 是存放公共的样式。
以上是项目基本的目录及用处,大家也应该看到了,uni的页面都是vue文件,其实uni框架就是用vue的,但是uni有很多地方和小程序很相似。
uni中页面调整路径的写法,必须要加上 ` `这两个符号, 小程序则不需要` `这两个符号
:url="`/pages/sort/${item.url}`"
uni中动态追加 class的写法,同样也加上` `这两个符号
:class="`${item.icon}`"
uni中设置头部导航栏样式,可以单独设置某个页面的头部导航栏,需要在pages.json文件中修改
{"path": "pages/travels/index","style": {"navigationBarTitleText": "游记","navigationStyle":"custom", //可以去掉小程序端的顶部导航"app-plus":{"titleNView":false // 去掉APP、H5的顶部导航}}
}
//此段主要是设置页面中顶部导航关闭方法
{"path": "pages/personal/index","style": {"navigationBarTitleText": "",//个人主页"navigationStyle":"custom", "app-plus":{"titleNView":{"type":"transparent","backgroundColor":"rgba(0,0,0,0.1)","titleColor": "#FFFFFF","titleOverflow":"ellipsis"}或者//"titleNView":{//透明渐变导航栏 App-nvue 2.4.4+ 支持 "type": "transparent"} }}
}
//此段主要是设置顶部导航栏半透明及渐变透明
onReady: function() {uni.setNavigationBarTitle({title: '爱生活的小美女主页'}),//success:res =>{},// fail:() =>{},//complete:() => {}console.log("页面首次渲染完毕时执行");
}
//此段主要是动态修改导航栏标题
写到这里了,大家发现uni和小程序的写法很相似。大家也可以看下官方给提供的文档:https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
以上都是一些基本的文件配置和语法事项,接下来我们看下页面中常用的模块。如果项目中模块是通用的,尽量做成组件,方便后续维护和减少代码量。页面的数据都是采用临时的接口。我使用的是fastmock在线接口https://www.fastmock.site/#/
这里大家自己注册个账号,创建接口就行。
这是常见的scroll-view左右滚动的效果。
<view class="local"><!-- 模块标题 --><view class="titleBlock"><text class="iconfont icon-retuijianyinqing"></text>{{ localTitle }}<view class="More" @click="localMoreUrl()">{{localMore}}</view></view><!-- scroll-view左右滚动 --><scroll-view class="localScroll" scroll-x="true" scroll-left="0" ><navigator class="localBlock" v-for="(item , index) in localList" :key="index" :url="`/pages/common/${item.localUrl}`"><image :src="item.localImg" :mode="item.mode" class="localImg"><view class="localName">{{item.cityName}}<text>{{item.EnglishName}}</text></view></navigator></scroll-view>
</view>
export default {data() {return {localTitle:'目的地',localMore:'更多',localList:[],}},onLoad() {this.localData(); },methods: {//目的地 数据localData(){uni.request({url:'https://www.fastmock.site/mock/接口id/list/api/localData', method: 'POST',dataType: 'JSON',data:{text:'uni.request'},header: {'content-type': 'application/x-www-form-urlencoded'}, success: (res) => {// 将请求到的数据存放放到localList中this.localList = eval(res.data);}}); }, //更多目的地localMoreUrl(e){uni.navigateTo({url:"/pages/more/index",});},}
}
以上代码就是scroll-view左右滚动效果加更多的效果,大家可以在本地尝试下。uniapp语法和小程序语法很相似,只有上述写的url和动态class有点区别,其他都很类似。
最后给大家看下首页的实际效果,后续会把页面封装组件写出来,写的不好,欢迎大家指正点评。
uni-app 项目笔记 基础配置及scroll-view左右滚动效果相关推荐
- HBuilder X ——Uni app 学习笔记(一)
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- Asp.Net Core 项目搭建 基础配置 和MySql 的使用
一.开发环境准备 1.安装Visual Studio 2015,我这里安装的是专业版. 2.安装.NET Core SDK相关 下载列表: https://www.microsoft.com/net ...
- 【NGUI基础知识】—Scroll View(滚动视图)详解
下面给大家分享下NGUI中Scroll View(滚动视图)中的各功能属性,帮助大家去理解及使用. ScrollView属性 1.Content Origin: 控制 panle 相对的 Scroll ...
- (Endless)Scroll View(画卷滚动视图)
就像酱紫,可以左右拖拉或者用下面的拉动条滚动. 之前做过Endless scroll view(无止境的画卷视图)的,像环状一样,左边拉完,会从右边出来,右边从左边出来 先把Endless scrol ...
- Unity3D UGUI Scroll View 二级滚动菜单
前言 如果有更好的写法或是代码有什么错误等等,还请大佬教教我. 最终效果 大概就这么个效果,使用的Scroll View做的,我使用的是中文版,看不懂英文,没得法 准备 预制件(各预制件结构在文中会有 ...
- React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
- vite创建react项目及基础配置
创建项目指令 npm init vite@latest vite-react-app -- --template react 修改配置文件配置,如修改端口号,添加less配置 resolve: {// ...
- IDEA 创建项目和基础配置
文章目录 一.创建工程 二.IDEA文件目录介绍 三.IDEA优化配置,提高启动和运行速度 四.IDEA的setting介绍 主题设置 设置鼠标悬浮提示 显示方法分隔符 忽略大小写提示 自动导包 取消 ...
- Oracle入门笔记—基础配置(一)
数据库入门学习 1.什么是Oracle数据库 2.什么是Oracle实例 3.Oracle实例与数据库的关系 4.Oracle的版本说明 5.Oracle的数据文件说明 6.Oracle的使用 6.1 ...
最新文章
- 初中英语八下单词表(SuperMemo QA文本格式)
- GRUB基本使用介绍
- C# 学习笔记(5) 继承
- springboot源码分析之环境属性构造过程1
- wxWidgets:C++ 异常
- VTK:Utilities之Screenshot
- 方法引用_通过对象名引用成员方法
- 中国四丁基尿素(TBU)市场趋势报告、技术动态创新及市场预测
- java textarea滚动条_java中swing的textArea滚动条显示不出来
- 通信与信息系统专业排名全国前十的…
- 基于LSTM算法的股票预测
- 如何用网站统计工具追踪访客来路
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
- 解题笔记(39)——过河问题
- swift 隐藏状态栏_swift 同时修改状态栏和导航栏出现的问题及解决的方法
- 喵星球上的点名(后缀自动机+dfs序+莫队)
- 教女朋友微信小程序(二)
- IDEA DEBUG 启动慢,启动卡死,本地IDEA环境,千万千万不要在方法上打断点!太坑了!
- android 使用ios字体大小,字体大小在iOS和Android上有所不同
- 淘宝竞争--李彦宏、马云、马化腾入选福布斯中文版年度商业人物
热门文章
- 我的世界pe服务器文件,我的世界PE版后台server指令 新手福音
- 如何恢复台式计算机出厂设置,如何在Lenovo台式计算机上恢复出厂设置?
- 华南师范大学陈卫东算法设计与分析研究生考试复习资料
- android生肖查询App
- html里link使用方法,html的link标签怎么使用?
- Git仓库、Jenkins搭建、应用Jenkins、管理应用服务器
- php excel多级下拉菜单自动生成,Excel中任意多级下拉菜单的制作方法
- PHP 函数filesize获取文件大小错误,一直不变
- 3.1_43 JavaSE-WEB核心 P1 【Tomcat、Servlet】
- 我来过,我很乖(催人泪下)