随笔分类 -  实战项目uniapp商城【可支付】

实战项目uniapp商城【可支付】
【首页】改变内容块高度
摘要：一、【首页】改变内容块高度 1.1 获取可视区域高度可以使用uni.getSystemInfo()，但是在ios中是有bug的，所以的高度值不对。 1.2 我们修正bug思想是：获取组件元素的高度值的合，然后赋值到内容块中（style=’height’）。 1.3 具体代码如下：特别注意需要在onR 阅读全文
posted @ 2023-01-11 19:43 沈妙 阅读(56) 评论(0) 推荐(0)
【首页】顶栏滑动跟随
摘要：一、【首页】顶栏滑动跟随 1.1 顶部滑动跟随需要在scroll-view中添加scroll-into-view属性，其中代表滚动到哪个块中，匹配为子元素的id，也就是子元素需要加入id值，但是id值不可以为数字开头，那么代码如下： 1.2 在changeTab方法中写入this.scrollInt 阅读全文
posted @ 2023-01-11 18:49 沈妙 阅读(106) 评论(0) 推荐(0)
【首页】顶栏滑块功能开发
摘要：一、【首页】顶栏滑块功能开发 1.1 完成效果： 1.2 顶部滑块数据： topBar:[ {name:'推荐'}, {name:'运动户外'}, {name:'服饰内衣'}, {name:'鞋靴箱包'}, {name:'美妆个护'}, {name:'家居数码'}, {name:'食品母婴'} ] 阅读全文
posted @ 2023-01-11 16:54 沈妙 阅读(51) 评论(0) 推荐(0)
【首页】隐藏滚动条和底部
摘要：一、【首页】隐藏滚动条和底部 1.1 隐藏全局滚动条，需要在pages.json的"app-plus"下设置一个属性："scrollIndicator":"none" 1.2 隐藏scroll-view滚动条需要在App.vue中添加样式： ::-webkit-scrollbar { display 阅读全文
posted @ 2023-01-11 10:27 沈妙 阅读(169) 评论(0) 推荐(0)
【首页】推荐店铺模块开发和滑块处理
摘要：一、【首页】推荐店铺模块开发和滑块处理 1.1 完成后的效果图： 1.2 components/index目录下新建Shop.vue组件 1.3 pages/index/index.vue引入Shop.vue组件 1.4 Shop.vue组件分为：上大图，下滑块的内容布局，滑块采用uni-app提供 阅读全文
posted @ 2023-01-10 21:34 沈妙 阅读(53) 评论(0) 推荐(0)
【首页】热销爆品开发修改商品值
摘要：一、【首页】热销爆品开发修改商品值 1.1 完成后的效果图： 1.2 component/index下创建Hot.vue组件 1.3 pages/index/index.vue引入Hot.vue组件 1.4 Hot组件内容为单个商品模块，所有引入了Commodity.vue组件。传递参数调整图片宽度 阅读全文
posted @ 2023-01-10 19:29 沈妙 阅读(45) 评论(0) 推荐(0)
【首页】运动户外头部开发
摘要：一、【首页】运动户外头部开发 1.1 完成后的效果图： 1.2 在components/index目录中创建了Banner.vue和Icons.vue组件 1.3 组件说明Banner.vue就是头图的展示。Icons.vue就是大家看到的宫格 1.4 Banner.vue代码如下： <templa 阅读全文
posted @ 2023-01-10 17:26 沈妙 阅读(38) 评论(0) 推荐(0)
【首页】商品列表和单个商品组件封装
摘要：一、【首页】商品列表和单个商品组件封装 1.1 完成效果为： 1.2 组件再次说明 commodityList.vue组件为：商品列表组件 commodity.vue 组件为：单个商品组件 1.3 创建文件：在components/common中创建CommodityList.vue和Commodi 阅读全文
posted @ 2023-01-10 15:09 沈妙 阅读(176) 评论(0) 推荐(0)
【首页】文字封装开发
摘要：一、【首页】文字封装开发 1.1 在components/common目录中创建了Card.vue组件文件 1.2 在pages/index/index.vue中引入Card组件 1.3 Card组件是卡片完成效果为复用的文字 1.4 完成效果为： 1.5 Card组件完成代码为： <templat 阅读全文
posted @ 2023-01-09 20:18 沈妙 阅读(43) 评论(0) 推荐(0)
【首页】推荐部分开发
摘要：一、【首页】推荐部分开发 1.1 完成效果图： 1.2 在components中新建组件Recommend.vue，代码如下： <template> <view class='recommend bg-color'> <view class='recommend-item'> <image clas 阅读全文
posted @ 2023-01-09 19:20 沈妙 阅读(33) 评论(0) 推荐(0)
【首页】swiper部分
摘要：一、【首页】swiper部分 1.1 完成效果图： 1.2 新建IndexSwiper.vue文件，目录结构如图 1.3 新建IndexSwiper.vue代码如下： <template> <swiper :indicator-dots="true" :autoplay="true" :interv 阅读全文
posted @ 2023-01-08 20:28 沈妙 阅读(52) 评论(0) 推荐(0)
【首页】顶部开发
摘要：三、【首页】顶部开发 1.1 完成效果图 1.2 首页顶部需要在pages.json中配置，代码如下： 框选中的部分为矢量中unicode代码将&#x改为\u { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocat 阅读全文
posted @ 2023-01-08 19:03 沈妙 阅读(41) 评论(0) 推荐(0)
【底部】导航开发
摘要：二、【底部】导航开发 1.1完成效果图： 1.2 在项目目录中pages.json中进行配置，代码如下： { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/ 阅读全文
posted @ 2023-01-08 17:06 沈妙 阅读(67) 评论(0) 推荐(0)
创建项目和引入文件
摘要：一、创建项目和引入文件 1.1 通过hbuilderx编辑器创建一个默认的uni-app项目 1.2 创建目录结构 1.2.1 在common目录中创建文件：common.css 注：common.css为全局css样式文件，其内容目前有： 1.2.2 在common目录中创建文件：uni.css。 阅读全文
posted @ 2023-01-08 16:53 沈妙 阅读(81) 评论(0) 推荐(0)
各个操作系统的调试方法
摘要：一.mac真机调试 （HBuilderX）: 1.手机与电脑连接 手机电脑 2.运行-->运行到手机或模拟器-->下载真机运行插件 3.运行-->运行到手机或模拟器-->运行设备 注意：第一次下载uni-app的依赖 如果要运行项目，需要再运行一次 HBuilder偷偷地在手机中出现 4.未受信任 阅读全文
posted @ 2023-01-05 17:06 沈妙 阅读(495) 评论(0) 推荐(0)