ui网站模板,企业网站无线端怎么做,北京海淀社保网站,新渝网门户网uni-app提供了一套基础组件#xff0c;类似HTML里的标签元素#xff0c;不推荐在uni-app中使用使用div等HTML标签。在uni-app中#xff0c;对应div的标签是view#xff0c;对应span的是text#xff0c;对应a的是navigator#xff0c;常用uni-app…uni-app提供了一套基础组件类似HTML里的标签元素不推荐在uni-app中使用使用div等HTML标签。在uni-app中对应div的标签是view对应span的是text对应a的是navigator常用uni-app组件见nulluni-app,uniCloud,serverless,介绍,基本用法,对齐方式,表单校验,如何使用,校验规则说明,rules 属性说明,validateFunction 自定义校验规则使用说明,validateFunction 异步校验,动态表单校验,表单校验时机说明,API,Forms Prophttps://zh.uniapp.dcloud.io/component/uniui/uni-forms.html在官网中uni-app 介绍了内置组件和扩展组件。
1、view组件 view为视图容器类似html的div用于包裹各种元素内容是页面布局最常用的标签。 view组件和传统的div有一定的区别div的演示和事件效果都是由css和javascript实现的而 view组件支持css样式的同事自带事件效果属性。view组件有四个属性 示例
view classparent-box hover-classbox-active view classbox hover-classbox-active hover-start-time3000 hover-stay- time3000 :hover-stop-propagationtrue微信小程序平台/view
/view
2、scroll-view组件 scroll-view可滚动视图区域用于区域滚动类似 H5的iScrolll效果使用非常广泛如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载更多等。scroll-view的属性也非常多较常用的有scroll-x、scroll-y、scroll-top、scroll-left、scroll等。具体属性介绍见官方文档
scroll-view | uni-app官网uni-app,uniCloud,serverless,scroll-view,属性说明,示例,自定义下拉刷新,webview中使用scroll-view的注意,其他注意事项https://zh.uniapp.dcloud.io/component/scroll-view.html这么都属性可能不太好记大家可以在项目实际开发时根据实际需要再详细了解不同的属性。
3、swiper组件 swiper滑块视图容器组件的最常用功能就是制作轮播图效果一般用于左右滑动或上下滑动和上面的滚动切换是有区别的滑块切换是一屏一屏地切换swiper下面的每个swiper-item都是一个滑动切换区域不能停留在2个滑动切换区域之间属性介绍参考官方文档https://zh.uniapp.dcloud.io/component/swiper.htmluni-app,uniCloud,serverless,swiper,easing-function,swiper-itemhttps://zh.uniapp.dcloud.io/component/swiper.html
示例
打开HBuilderX,让之前生成的Demo项目的pages/index/index.vue的内容替换下面的
template view swiper classswiper :indicator-dotstrue :autoplaytrue :interval3000 :duration500 indicator-color#000000 indicator-active-color#0000FF swiper-item v-for(item,index) in images :keyindex image :srcitem.path/image /swiper-item /swiper /view /template
script export default { name: swiper-component, data() { return { images:[ { path://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png }, { path://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png }, { path://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png } ] } } } /script
style scoped .swiper{width:100%;height:400rpx;} .swiper image{width:100%;height:100%} /style 然后运行到小程序模拟器-微信开发者工具运行效果 4、movable-area和movable-view movable-area是可拖动区域组件movable-view是可移动视图组件这2个组件搭配使用可实现在页面中拖动滑动或双指缩放功能。 movable-area指可拖动范围在其中可内嵌movable-view用于指示可拖动区域即手指或鼠标按住 movable-view托众或双指缩放但拖不出movable-area规定的范围。 movable-area官方文档参考
movable-area | uni-app官网uni-app,uniCloud,serverless,movable-areahttps://zh.uniapp.dcloud.io/component/movable-area.htmlmovable-view官方文档参考:
movable-view | uni-app官网uni-app,uniCloud,serverless,movable-viewhttps://zh.uniapp.dcloud.io/component/movable-view.html
5、text和rich-text组件
【text组件】 在uni-app中纯文字建议用text组件包裹以实现长按选择文字、连续空格、解码功能。rich-text富文本组件可解析HTML标签通常用于显示商品介绍、文章内容等应用场景。 text组件属性介绍参考官方文档
text组件 | uni-app官网uni-app,uniCloud,serverless,text组件,属性说明,子组件,Tips,示例https://zh.uniapp.dcloud.io/component/text.html页面示例
template view text :decodetrue spacenbsp :selectabletrue{{text}}/text /view
/template script export default { name: text-component, data(){ return { text:我是lt;textgt;nbsp; 组件 } } }
/script style scoped /style :decodetrue 表示可将文本中的特殊字符解码成原始文本。
【rich-text组件】
rich-text组件支持部分HTML节点及属性。官方文档参考
rich-text | uni-app官网uni-app,uniCloud,serverless,rich-texthttps://zh.uniapp.dcloud.io/component/rich-text.html rich-text的具体使用会比较复杂。其中nodes属性可绑定type为text的数组和type为node 数组。这里暂不做详细说明。大家可网上找下详细的示例。
