2023年1月11日
【首页】顶栏滑动跟随
摘要： 一、【首页】顶栏滑动跟随 1.1 顶部滑动跟随需要在scroll-view中添加scroll-into-view属性，其中代表滚动到哪个块中，匹配为子元素的id，也就是子元素需要加入id值，但是id值不可以为数字开头，那么代码如下： 1.2 在changeTab方法中写入this.scrollInt 阅读全文
posted @ 2023-01-11 18:49 沈妙 阅读(79) 评论(0) 推荐(0)
【首页】顶栏滑块功能开发
摘要： 一、【首页】顶栏滑块功能开发 1.1 完成效果： 1.2 顶部滑块数据： topBar:[ {name:'推荐'}, {name:'运动户外'}, {name:'服饰内衣'}, {name:'鞋靴箱包'}, {name:'美妆个护'}, {name:'家居数码'}, {name:'食品母婴'} ] 阅读全文
posted @ 2023-01-11 16:54 沈妙 阅读(38) 评论(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 沈妙 阅读(160) 评论(0) 推荐(0)
2023年1月10日
【首页】推荐店铺模块开发和滑块处理
摘要： 一、【首页】推荐店铺模块开发和滑块处理 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 沈妙 阅读(41) 评论(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 沈妙 阅读(31) 评论(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 沈妙 阅读(31) 评论(0) 推荐(0)
【首页】商品列表和单个商品组件封装
摘要： 一、【首页】商品列表和单个商品组件封装 1.1 完成效果为： 1.2 组件再次说明 commodityList.vue组件为：商品列表组件 commodity.vue 组件为：单个商品组件 1.3 创建文件：在components/common中创建CommodityList.vue和Commodi 阅读全文
posted @ 2023-01-10 15:09 沈妙 阅读(160) 评论(0) 推荐(0)
2023年1月9日
【首页】文字封装开发
摘要： 一、【首页】文字封装开发 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 沈妙 阅读(24) 评论(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 沈妙 阅读(26) 评论(0) 推荐(0)
2023年1月8日
【首页】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 沈妙 阅读(28) 评论(0) 推荐(0)