公司展厅设计制作,秦皇岛做网站优化公司,营销型网站建设的指导原则,网站建设后台怎么修改一、本节项目预备知识
1、效果演示
2、常见组件
1、view组件
视图容器#xff0c;它类似于传统html中的div#xff0c;用于包裹各种元素内容。
2、swiper组件
swiper是滑动视图容器#xff0c;经常看到的轮播图就是通过它来完成的
swiper-item是swiper子组件#xf…一、本节项目预备知识
1、效果演示
2、常见组件
1、view组件
视图容器它类似于传统html中的div用于包裹各种元素内容。
2、swiper组件
swiper是滑动视图容器经常看到的轮播图就是通过它来完成的
swiper-item是swiper子组件仅能放到swiper组件中
swiper常用属性
属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色autoplayBooleanfalse是否自动切换currentNumber0当前所在滑块的 indexintervalNumber5000自动切换时间间隔durationNumber500滑动动画时长
templateview classcontainerswiper classswiper :indicator-dotstrue :autoplaytrue :interval2000swiper-itemtext1/text/swiper-itemswiper-itemtext2/text/swiper-itemswiper-itemtext3/text/swiper-item/swiper/view
/template
style langscss.swiper{width: 750rpx;height: 300rpx;background-color: #ccc;}
/style
3、image组件
图片组件的常见属性
属性名类型说明srcString图片的资源地址modeString图片裁剪、缩放模式lazy-loadBoolean图片懒加载
常见的mode值
值含义scaleToFill缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。aspectFill缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。widthFix缩放模式宽度不变高度自动变化保持原图宽高比不变heightFix缩放模式高度不变宽度自动变化保持原图宽高比不变
templateview classcontainerswiper classswiper :indicator-dotstrue :autoplaytrue :interval2000swiper-item v-for(item,index) in swiperList :keyindeximage :srcitem.image_src modewidthFix classswiper-image/image/swiper-item/swiper/view
/template
scriptexport default {data() {return {swiperList:[ {image_src: https://api-hmugo-web.itheima.net/pyg/banner1.png,open_type: navigate,goods_id: 129,navigator_url: /pages/goods_detail/main?goods_id129},{image_src: https://api-hmugo-web.itheima.net/pyg/banner2.png,open_type: navigate,goods_id: 395,navigator_url: /pages/goods_detail/main?goods_id395},{image_src: https://api-hmugo-web.itheima.net/pyg/banner3.png,open_type: navigate,goods_id: 38,navigator_url: /pages/goods_detail/main?goods_id38}]}}}
/script
style langscss.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
/style
3、网络
3.1、发起请求
uni.request(OBJECT)
OBJECT 参数说明
属性类型必填项说明urlString是开发者服务器接口地址dataString/Object/ArrayBuffer否请求的参数headerObject否设置请求的 headerheader 中不能设置 Referer。content-type默认为application/jsonmethodstring否HTTP 请求方法dataTypestring否返回的数据格式successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
案例首页轮播图
export default {data() {return {swiperList:[]}},created() {uni.request({url:https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata,method:GET,success:(res) {this.swiperListres.data.message}})}
}
3.2、微信小程序网络
1)、微信小程序网络请求限制
处于安全性方面的考虑小程序官方对数据接口的请求做出了如下两个限制 只能请求HTTPS类型的接口 必须将接口的域名添加到信任列表中
2)、配置request合法域名
配置步骤登录微信小程序管理后台-开发-开发设置-服务器域名-修改request合法域名
注意事项 域名只支持https协议 域名不能使用IP地址或localhost 域名必须经过ICP备案 服务器域名一个月内最多可申请5次修改
3)、跳过requesth合法域名校验
如果后台程序员仅仅提供了http协议的接口暂时没有提供https协议的接口此时为了不耽误开发的进度我们可以在微信开发者工具中临时开启【开发者不校验请求域名、TLS版本及HTTPS证书】选项跳过request合法域名的校验。
注意跳过requesth合法域名校验的选项仅限在开发与调试阶段使用。
3.3、封装uni.reqeust
在src/utils目录下创建request.js
const BASE_URLhttps://api-hmugo-web.itheima.net/api/public/v1
export default{//发送GET请求get:(url,data){return new Promise((resolve,reject){uni.showLoading({title:网络正在加载中请稍等})//发送网路请求uni.request({method:GET,url:BASE_URLurl,data:data,header:{Content-Type:application/json},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})},//发送POST请求post:(url,data){return new Promise((resolve,reject){uni.showLoading({title:网络正在加载中请稍等})//发送网路请求uni.request({method:POST,url:BASE_URLurl,data:data,header:{Content-Type:application/json},success(data) {resolve(data)},fail(err) {reject(err)},complete() {uni.hideLoading() //关闭加载框}})})}
}
在main.js中将request.js挂载到全局
import request from /utils/request.js
uni.$apirequest
组件中调用
templateview classcontainerswiper classswiper :indicator-dotstrue :autoplaytrue :interval2000swiper-item v-for(item,index) in swiperList :keyindeximage :srcitem.image_src modewidthFix classswiper-image :lazy-loadtrue/image/swiper-item/swiper/view
/template
scriptexport default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let resultawait uni.$api.get(/home/swiperdata)this.swiperListresult.message}},created() {this.getSwiperList()}}
/script
style langscss.swiper{width: 750rpx;height: 300rpx;.swiper-image{width: 100%;height: 100%;}}
/style
二、商城首页
1、首页轮播图
1.1、首页请求轮播图数据
实现步骤 在 data 中定义轮播图的数组 在 created生命周期函数中调用获取轮播图数据的方法 在 methods 中定义获取轮播图数据的方法
export default {data() {return {swiperList:[]}},methods:{async getSwiperList(){let resultawait this.$request({url:/home/swiperdata})this.swiperListresult.message}},created() {this.getSwiperList()}
}
1.2、自定义轮播图组件
templateswiper classswiper :indicator-dotstrue :autoplaytrue :interval2000swiper-item v-for(item,index) in swiperList :keyindeximage :srcitem.image_src modewidthFix classswiper-image :lazy-loadtrue/image/swiper-item/swiper
/templatescriptexport default {props: [swiperList]}
/scriptstyle langscss.swiper {width: 750rpx;height: 300rpx;.swiper-image {width: 100%;height: 100%;}}
/style
1.3、首页引用轮播图组件
templateviewhomeSwiper :swiperListswiperList/homeSwiper/view
/template
scriptimport homeSwiper from /pages/index/homeSwiper.vueexport default {components:{homeSwiper}}
/script
2、首页分类导航区域
实现步骤 在 data 中定义首页导航的数组 在 created生命周期函数中调用获取导航数据的方法 在 methods 中定义获取导航数据的方法
2.1、首页请求轮播图数据
export default {data() {return {navList:[]}},methods:{async getNavList(){let resultawait this.$request({url:/home/catitems})this.navListresult.message}},created() {this.getNavList()}
}
2.2、自定义首页导航组件
templateview classnav-listview classnav-item v-for(item,index) in navList :keyindeximage :srcitem.image_src classnav-item-image/view/view
/templatescriptexport default{props:[navList]}
/scriptstyle langscss.nav-list{display: flex;justify-content: center;margin-top: 50rpx;.nav-item{flex-grow: 1;display: flex;justify-content: center;.nav-item-image{width: 128rpx;height: 140rpx;}}}
/style
2.3、首页引用导航组件
templateviewhome-nav :navListnavList/home-nav/view
/template
scriptimport homeNav from /components/homeNav/index.vueexport default {components:{homeNav}}
/script
3、首页楼层区域 在 data 中定义首页楼层的数组 在 created生命周期函数中调用首页楼层的方法 在 methods 中定义获取首页楼层数据的方法
3.1、首页请求楼层数据
export default {data() {return {floorList:[]}},methods:{async getFloorList(){let resultawait this.$request({url:/home/floordata})this.floorListresult.message}},created() {this.getFloorList()}
}
3.2、自定义首页楼层组件 渲染楼层中的标题
templateview classfloor-listview classfloor-item v-for(item,index) in floorList :keyindexview classfloor-titleimage :srcitem.floor_title.image_src classfloor-item-img modewidthFix/image/view/view/view
/templatescriptexport default{props:[floorList],mounted() {console.log(floorList,this.floorListData);}}
/scriptstyle langscss.floor-title{display: flex;margin-top: 30rpx;}
/style 渲染楼层中的图片
templateview classfloor-listview classfloor-item v-for(item,index) in floorList :keyindexview classfloor-titleimage :srcitem.floor_title.image_src classfloor-item-img modewidthFix/image/viewview classfloor-imgview classfloor-left-imgview classleft-img-boximage :srcitem.product_list[0].image_src modewidthFix classbig-img/image/view/viewview classfloor-right-imgview v-for(subItem,idx) in item.product_list :keyidx v-ifidx!0 classright-img-box-itemimage :srcsubItem.image_src modewidthFix classsmall-img/image/view/view/view/view/view
/template
style.floor-title{display: flex;margin-top: 30rpx;}.floor-item-img{width: 100%;height: 60rpx;}.floor-img{display: flex;margin-left: 20rpx;}.floor-right-img{display: flex;flex-wrap: wrap;}.big-img{width: 232rpx;}.small-img{width: 233rpx;}
/style
3.3、首页引用楼层组件
templateviewhome-floor :floorListfloorList/home-floor/view
/template
scriptimport homeFloor from /components/homeFloor/index.vueexport default {components:{homeFloor}}
/script
三、商城分类页
1、渲染分类页面的基本结构
templateview classcontainerscroll-view classleft-scroll-view scroll-ytrueview classleft-scroll-view-item active产品0/viewview v-fori in 100 classleft-scroll-view-itemtext产品{{i}}/text/view/scroll-viewscroll-view classright-scroll-view scroll-ytrue view v-fori in 100xxxxxx/view/scroll-view/view
/templatescript
/scriptstyle langscss.container{display: flex}.left-scroll-view{width: 240rpx;height: 100vh;.left-scroll-view-item{line-height: 120rpx;background-color: #f7f7f7;text-align: center;}.active{background-color: #fff;position: relative;}.active::before{content: ;display: block;position:absolute;width: 10rpx;height: 80rpx;background-color: darkorange;top:50%;transform: translateY(-50%);}}.right-scroll-view{flex-grow: 1;height: 100vh;}
/style
2、获取分类数据
export default{data(){return{categoryList:[]}},methods:{async getCategoryList(){let resultawait this.$request({url:/categories})this.categoryListresult.message}},created() {this.getCategoryList()}
}
3、动态渲染左侧的一级分类列表 循环渲染列表结构
view classcontainerscroll-view classleft-scroll-view scroll-ytrueview v-for(item,index) in categoryList :keyindex classleft-scroll-view-itemtext{{item.cat_name}}/text/view/scroll-view
/view 在 data 中定义默认选中项的索引
data(){return{active:0}
}, 循环渲染结构时为选中项动态添加 .active 样式
view v-for(item,index) in categoryList :keyindex :class{left-scroll-view-item:true,active:indexactive?true:false}text{{item.cat_name}}/text
/view 为一级分类的 Item 项绑定点击事件处理函数 activeChanged
view v-for(item,index) in categoryList :keyindex :class{left-scroll-view-item:true,active:indexactive?true:false}clickactiveChange(index)text{{item.cat_name}}/text
/view 定义 activeChanged 事件处理函数动态修改选中项的索引
methods:{activeChange(index){this.activeindex}
}
4、动态渲染右侧的二级分类列表 在data中定义二级分类的数据
data() {return {secondCategoryList: []}
}, 修改 getCategoryList方法在请求到数据之后为二级分类列表数据赋值
async getCategoryList() {let result await this.$request({url: /categories})this.categoryList result.messagethis.secondCategoryList result.message[0].children
}, 修改 activeChange 方法在一级分类选中项改变之后为二级分类列表数据重新赋值
activeChange(index) {this.active indexthis.secondCategoryList this.categoryList[index].children
} 循环渲染右侧二级分类列表的 UI 结构
scroll-view classright-scroll-view scroll-ytrueview classcate-lv2 v-for(item,index) in secondCategoryList :keyindexview classcate-lv2-titletext{{item.cat_name}}/text/view/view
/scroll-view 样式
.cate-lv2-title {font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;
}
5、动态渲染右侧的三级分类列表 三级菜单结构
templateview classcontainer!--左侧栏代码省略--scroll-view classright-scroll-view scroll-ytrueview classcate-lv2 v-for(item,index) in secondCategoryList :keyindexview classcate-lv2-titletext{{item.cat_name}}/text/view!--三级菜单--view classcate-lv3-listview classcate-lv3-item v-for(subitem,subIndex) in item.children :keysubIndeximage :srcsubitem.cat_icon classitem3_img/imagetext{{subitem.cat_name}}/text/view/view/view/scroll-view/view
/template 样式
.cate-lv3-list{display: flex;flex-wrap: wrap;justify-content: center;.cate-lv3-item{flex-grow: 1;display: flex;flex-direction: column;margin: 20rpx;.item3_img{width: 120rpx;height: 120rpx;}} }
