uni-app深入学习之模板运用【day4】

简介: uni-app深入学习之模板运用【day4】

在这里插入图片描述

去掉滚动条

以前没有做过很多的项目都没有涉及到滚动条的处理。我刚刚看到这也让人耳目一新。它还可以处理滚动条。当然,编码吧。

.scroll-box ::-webkit-scrollbar{
    width: 0 !important;
    display: none;
    height: 0 !important;
    -webkit-appearance : none;
    background : transparent;
}

uni app的标记与applet和HTML的标记不同。例如,div应更改为view,span应更改为text,a应更改为navigator。

好看的板子,评价模板

了解动画的用法,如下:

image.active{
    animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
}

@keyframes star_move{
        from{
            width: 50upx;
            height: 50upx;
            transform: rotate(180deg)
        }
        to{
            width: 32upx;
            height: 32upx;
            transform: rotate(0)
        }
    }
    @keyframes star_rotate{
        0%{
            transform: rotateY(360deg)
        }
        100%{
            transform: rotateY(180deg)
        }
    }

运行结果如图所示:
在这里插入图片描述

request 请求

我们使用uni app的请求

uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

你发现有什么不同吗?因此,除前缀Wx替换为uni外,其他要求与原规范一致。Uni app将最大程度地消除不同applet平台之间的差异。

跨端

虽然是交叉端,但一定有一些情况不受支持。例如,如果遇到一些特定于平台的API,我应该怎么做?
别担心。Uni-app考虑了这些问题,即使用条件编译。

条件编译

在C语言中,通过\ifdef和\ifndef,为不同的操作系统(如windows和MAC)编译不同的代码。uni-app参考的思想为uni-app提供了一种有条件的编译手段,很好地完成了平台在项目中的个性化实现。
通过使用注释实现条件编译。注释以不同的语法编写。JS使用//注释,CSS使用/注释/,vue/nvue模板使用`。
平台特有的API实现:
表示只有 h5 不使用这个 api

uni.createAnimation(OBJECT)

注意:
对于非H5端,不能使用浏览器自己的对象,如文档、窗口、本地存储、cookies等,也不能使用jQuery和其他依赖于这些浏览器对象的框架。因为任何小程序都不支持这些对象。没有这些浏览器内置对象,业务发展不会受到影响。uni提供的API足以完成业务。

相关文章
|
Java 数据库 Android开发
0003Java安卓程序设计-springboot基于Android的学习生活交流APP
0003Java安卓程序设计-springboot基于Android的学习生活交流APP
255 0
|
小程序 前端开发
生活商城app微信小程序模板源码
生活商城app微信小程序模板源码
353 6
|
小程序 前端开发
汽车报价资讯app小程序模板源码
汽车报价资讯app小程序模板源码
242 4
|
小程序 搜索推荐 Android开发
Axure原型模板与元件库APP交互设计素材(附资料)
Axure是一款强大的原型设计工具,广泛应用于APP和小程序的设计与开发。本文详细介绍Axure的常用界面组件元件库、交互设计素材,涵盖电商、社区服务、娱乐休闲、农业农村、教育等领域的多套交互案例。通过手机模型、矢量图标、通用组件等资源,设计师可高效构建原型并模拟用户操作,评估界面效果。Axure支持导出和分享,助力团队协作,推动更多优秀应用的诞生。
1671 6
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
663 26
|
缓存
flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
基于最新跨平台框架flutter3.x+dart3+getx+flutter_datepicker纯手写实战的一款仿去哪儿/携程旅游酒店预约客房app系统。
608 7
|
缓存 视频直播
flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
基于最新版flutter3.27+dart3.x+Getx+mediaKit原创实战研发抖音app带货商城项目。集成了直播+短视频+聊天三大功能模块。实现了类似抖音app首页全屏沉浸式联动左右滑动页面模块、上下滑动短视频。
673 1
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
585 9
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
745 0
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
449 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目