网站首页怎么做全屏swf,电商培训,wordpress文章编辑软件,百度搜索数据1 视图容器
1.1 view
Flex是Flexible Box的缩写#xff0c;意为“弹性布局”#xff0c;用来为盒状模型提供最大的灵活性。 当设置display: flex后#xff0c;继续给view等容器组件设置flex-direction:row或column#xff0c;就可以在该容器内按行或列排布子组件。uni-ap…1 视图容器
1.1 view
Flex是Flexible Box的缩写意为“弹性布局”用来为盒状模型提供最大的灵活性。 当设置display: flex后继续给view等容器组件设置flex-direction:row或column就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局, 因为flex布局有利于跨更多平台尤其是采用原生渲染的平台。
1.2 scroll-view
scroll-view是区域滚动不会触发页面滚动无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中区域滚动的性能不及页面滚动。 templateviewpage-head titlescroll-view,区域滚动视图/page-headview classuni-padding-wrap uni-common-mtview classuni-title uni-common-mtVertical Scrolltext\n纵向滚动/text/viewview!-- scroll-top Number/String 设置竖向滚动条位置 --!-- scroll-y Boolean false 允许纵向滚动 --!-- scrolltoupper EventHandle 滚动到顶部/左边会触发 scrolltoupper 事件 --!-- scrolltolower EventHandle 滚动到底部/右边会触发 scrolltolower 事件 --!-- scroll EventHandle 滚动时触发event.detail {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} --scroll-view :scroll-topscrollTop scroll-ytrue classscroll-Y scrolltoupperupper scrolltolowerlowerscrollscrollview iddemo1 classscroll-view-item uni-bg-redA/viewview iddemo2 classscroll-view-item uni-bg-greenB/viewview iddemo3 classscroll-view-item uni-bg-blueC/view/scroll-view/view!-- tap (event: MouseEvent) void - 手指触摸后马上离开 --!-- longpress (event: Event) void - 如果一个组件被绑定了 longpress 事件那么当用户长按这个组件时该事件将会被触发。 --view tapgoTop classuni-link uni-center uni-common-mt点击这里返回顶部/viewview classuni-title uni-common-mtHorizontal Scrolltext\n横向滚动/text/viewviewscroll-view classscroll-view_H scroll-xtrue scrollscroll scroll-left120view iddemo1 classscroll-view-item_H uni-bg-redA/viewview iddemo2 classscroll-view-item_H uni-bg-greenB/viewview iddemo3 classscroll-view-item_H uni-bg-blueC/view/scroll-view/viewview classuni-common-pb/view/view/view
/template自定义下拉刷新
注意在webview渲染时自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。
1.3 pages.json中配置的原生下拉刷新
实现思路 第一步在pages.json中配置该页面允许进行下拉刷新 第二步在下拉刷新的生命周期函数中处理逻辑
在pages.json中配置该页面允许进行下拉刷新
{pages: [{path: pages/index/index,style: {navigationBarTitleText: 首页,//设置页面标题文字enablePullDownRefresh:true//开启下拉刷新}},...]
}
在下拉刷新的生命周期函数中处理逻辑
onPullDownRefresh() {console.log(onPullDownRefresh);this.initData();
},1.4swiper
滑块视图容器。一般用于左右滑动或上下滑动比如banner轮播图。
注意滑动切换和滚动的区别滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域不能停留在2个滑动区域之间。 view classuni-margin-wrap!-- circular Boolean false 是否采用衔接滑动即播放到末尾后重新回到开头 --!-- indicator-dots Boolean false 是否显示面板指示点 --!-- autoplay Boolean false 是否自动切换 --!-- interval Number 5000 自动切换时间间隔 --!-- duration Number 500 滑动动画时长 --swiper classswiper circular :indicator-dotsindicatorDots :autoplayautoplay :intervalinterval :durationdurationswiper-itemview classswiper-item uni-bg-redA/view/swiper-itemswiper-itemview classswiper-item uni-bg-greenB/view/swiper-itemswiper-itemview classswiper-item uni-bg-blueC/view/swiper-item/swiper/view2 基础内容
2.1 icon图标
uniapp中自带的icon很少不管哪个UI框架都有这个问题最好就是引用来自iconfont之类的自定义项目文件我见过很多项目是将文件直接下载下来使用弊端是操作麻烦颜色不可修改只能用已下载的颜色最好的方式当然是使用字体文件来实现这里就详细说下操作流程
方案步骤 步骤主要分两块一块是iconfont上的项目管理一块是本地uniapp项目中的配置
iconfont端 iconfont端主要分3步 创建项目 选择图标 导出字体文件
项目端引用 项目端引用主要分3步: 4. 文件下载
CSS引用 然后进入到App.vue中的style进行CSS引用
styleimport /static/icon/iconfont.css;
/styleCSS引用路径修改
这里是个小坑因为默认网页中css引用当前文件夹下的字体文件是没问题的但是在uniapp中需要去修改iconfont.css中的引用字体的文件位置
font-face {font-family: iconfont; /* Project id 3355581 */src: url(iconfont.woff2?t1650891154292) format(woff2),url(iconfont.woff?t1650891154292) format(woff),url(iconfont.ttf?t1650891154292) format(truetype);
}
改为如下记得按你自己的路径来修改
font-face {font-family: iconfont; /* Project id 3355581 */src: url(/static/icon/iconfont.woff2?t1650891154292) format(woff2),url(/static/icon/iconfont.woff?t1650891154292) format(woff),url(/static/icon/iconfont.ttf?t1650891154292) format(truetype);
}
至此就可以在前端进行引用了eg: viewview classiconfont icon-huiju2 stylefont-size: 100rpx; color: green;;/view/view2.2 text组件
文本组件。用于包裹文本内容。
支持 \n 方式换行。 view classtext-boxtext{{text}}/text/view2.3 rich-text
富文本。支持默认事件包括click、touchstart、touchmove、touchcancel、touchend、longpress。 export default {data() {return {title: rich-text,nodes: [{// name 标签名 String 是 支持部分受信任的 HTML 节点name: div,// attrs 属性 Object 否 支持部分受信任的属性遵循 Pascal 命名法attrs: {class: div-class,style: line-height: 60px; color: red; text-align:center;},// children 子节点列表 Array 否 结构和 nodes 一致children: [{type: text,text: Hellonbsp;uni-app!}]}],strings: div styletext-align:center;img srchttps://web-assets.dcloud.net.cn/unidoc/zh/uni2x.png//div}}}nodes 不推荐使用 String 类型性能会有所下降。rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击则不能使用rich-textattrs 属性不支持 id 支持 class
2.4 progress
进度条。 view classuni-padding-wrap uni-common-mtview classprogress-box!-- 属性名 类型 默认值 说明 --!-- percent Number 无 百分比0~100 --!-- show-info Boolean false 在进度条右侧显示百分比 --!-- stroke-width Number 6 进度条线的宽度单位px --progress :percentpgList[0] show-info stroke-width3 //viewview classprogress-boxprogress :percentpgList[1] stroke-width3 /uni-icons typeclose classprogress-cancel color#dd524d/uni-icons/viewview classprogress-boxprogress :percentpgList[2] stroke-width3 //viewview classprogress-box!-- activeColor Color #09BB07百度为#E6E6E6 已选择的进度条的颜色 --progress :percentpgList[3] activeColor#10AEFF stroke-width3 //viewview classprogress-controlbutton typeprimary clicksetProgress设置进度/buttonbutton typewarn clickclearProgress清除进度/button/view/view3 表单组件
3.1 button button 组件的点击遵循 vue 标准的 click事件。
button 组件没有 url 属性如果要跳转页面可以在click中编写也可以在button组件外面套一层 navigator 组件。举例如需跳转到about页面可按如下几种代码写法执行
templateviewnavigator url/pages/about/aboutbutton typedefault通过navigator组件跳转到about页面/button/navigatorbutton typedefault clickgoto(/pages/about/about)通过方法跳转到about页面/buttonbutton typedefault clicknavigateTo(/pages/about/about)跳转到about页面/button!-- 这种写法只有h5平台支持不跨端不推荐使用 --/view
/template
scriptexport default {methods: {goto(url) {uni.navigateTo({url:url})}}}
/script
3.2 checkbox-group
多项选择器内部由多个 checkbox 组成。
templateviewpage-head :titletitle/page-headview classuni-padding-wrap uni-common-mtview classuni-title uni-common-mt默认样式/viewviewcheckbox-grouplabel!-- checked Boolean false 当前是否选中可用来设置默认选中 --checkbox valuecb1 checkedtrue /选中/labellabelcheckbox valuecb /未选中/label/checkbox-group/viewview classuni-title uni-common-mt不同颜色和尺寸的checkbox/viewviewcheckbox-grouplabelcheckbox valuecb1 checkedtrue color#FFCC33 styletransform:scale(0.7) /选中/labellabel!-- color Color checkbox的颜色同css的color --checkbox valuecb color#FFCC33 styletransform:scale(0.7) /未选中/label/checkbox-group/view/viewview classuni-padding-wrapview classuni-title uni-common-mt推荐展示样式text\n使用 uni-list 布局/text/view/view!-- .uni-list {background-color: #FFFFFF;position: relative;width: 100%;display: flex;flex-direction: column;} --view classuni-list!-- change EventHandle checkbox-group中选中项发生改变是触发 change 事件 --checkbox-group changecheckboxChangelabel classuni-list-cell uni-list-cell-pd v-foritem in items :keyitem.valueviewcheckbox :valueitem.value :checkeditem.checked //viewview{{item.name}}/view/label/checkbox-group/view/view
/template
scriptexport default {data() {return {title: checkbox 复选框,items: [{value: USA,name: 美国},{value: CHN,name: 中国,checked: true},{value: BRA,name: 巴西},{value: JPN,name: 日本},{value: ENG,name: 英国},{value: FRA,name: 法国}]}},methods: {checkboxChange: function(e) {console.log(e , e);var items this.items,values e.detail.value;for (var i 0, lenI items.length; i lenI; i) {const item items[i]if (values.indexOf(item.value) 0) {this.$set(item, checked, true)} else {this.$set(item, checked, false)}}}}}
/scriptstyle/* justify-content是用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式。它常用于CSS的Flexbox布局。以下是justify-content的常用属性值flex-start默认值项目位于容器的开头。flex-end项目位于容器的结尾。center项目位于容器的中心。space-between项目位于各行之间留有空白的容器内第一行在容器开头最后一行在容器结尾。space-around每个项目的左右撑开距离相等项目与项目之间以及头尾的间距相等。space-evenly每个间距均匀分布为容器宽度的一半。需要注意的是justify-content属性在Internet Explorer和Safari浏览器中不被支持。 */.uni-list-cell {justify-content: flex-start}
/style 3.3 editor
富文本编辑器可以对图片、文字格式进行编辑和混排。
3.4 form
表单将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 formType 为 submit 的 button 组件时会将表单组件中的 value 值进行提交需要在表单组件中加上 name 来作为 key。 templateviewpage-head titleform/page-headview classuni-padding-wrap uni-common-mtform submitformSubmit resetformResetview classuni-form-item uni-columnview classtitle姓名/view!-- .uni-input {height: 50rpx;padding: 15rpx 25rpx;line-height:50rpx;font-size:28rpx;background:#FFF;flex: 1;} --!-- flex: 1表示项目的放大比例和缩小比例都为1即当存在剩余空间时该项目将自动放大以占据更多的空间而在超出父容器时超出部分将等分缩小的比例。这是一种常用的自适应布局方式可以将父容器的空间自动分配给子元素以达到自动调整布局的效果。 --input classuni-input namenickname placeholder请输入姓名 //viewview classuni-form-item uni-columnview classtitle性别/viewradio-group namegenderlabelradio value男 /text男/text/labellabelradio value女 /text女/text/label/radio-group/viewview classuni-form-item uni-columnview classtitle爱好/viewcheckbox-group nameloveslabelcheckbox value读书 /text读书/text/labellabelcheckbox value写字 /text写字/text/label/checkbox-group/viewview classuni-form-item uni-columnview classtitle年龄/viewslider value20 nameage show-value/slider/viewview classuni-form-item uni-columnview classtitle保留选项/viewviewswitch nameswitch //view/viewview classuni-btn-vbutton form-typesubmitSubmit/buttonbutton typedefault form-typeresetReset/button/view/form/view/view
/template
scriptimport graceChecker from ../../../common/graceChecker.jsexport default {data() {return {}},methods: {formSubmit: function(e) {console.log(form发生了submit事件携带数据为 JSON.stringify(e.detail.value))//定义表单规则var rule [{name:nickname, checkType : string, checkRule:1,3, errorMsg:姓名应为1-3个字符},{name:gender, checkType : in, checkRule:男,女, errorMsg:请选择性别},{name:loves, checkType : notnull, checkRule:, errorMsg:请选择爱好}];//进行表单检查var formData e.detail.value;var checkRes graceChecker.check(formData, rule);if(checkRes){uni.showToast({title:验证通过!, icon:none});}else{uni.showToast({ title: graceChecker.error, icon: none });}},formReset: function(e) {console.log(清空数据)}}}
/scriptstyle.uni-form-item .title {padding: 20rpx 0;}
/style
解读一下代码
form submitformSubmit resetformResetformSubmit: function(e) {console.log(e , e);console.log(form发生了submit事件携带数据为 JSON.stringify(e.detail.value))//定义表单规则var rule [{name:nickname, checkType : string, checkRule:1,3, errorMsg:姓名应为1-3个字符},{name:gender, checkType : in, checkRule:男,女, errorMsg:请选择性别},{name:loves, checkType : notnull, checkRule:, errorMsg:请选择爱好}];//进行表单检查var formData e.detail.value;var checkRes graceChecker.check(formData, rule);if(checkRes){uni.showToast({title:验证通过!, icon:none});}else{uni.showToast({ title: graceChecker.error, icon: none });}}为方便做表单验证uni ui提供了组件参考https://ext.dcloud.net.cn/plugin?id2773
3.5 uni-forms
