微信小程序开发系列（十）·商品导航区域

已于 2024-03-05 13:26:49 修改
阅读量514 收藏 14
点赞数 11
分类专栏： 微信小程序开发 文章标签： java 前端 javascript 小程序 微信小程序 css html
于 2024-03-01 06:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MANONGDKY/article/details/136361087
版权

目录

1.  商品导航区域

1.1  添加图片

1.2  更改图片大小

1.3  文字和图片呈现上下结构

1.4  更改字体大小，增加文字和图片之间的间隙 

1.5  图片和文字垂直对齐

1.6  本节完整代码

1.  商品导航区域

1.1  添加图片

        找到index.wxml文件，找到该文件下的商品导航区域，添加如下代码：

<!-- 商品导航 -->
<view class="good-nav">
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
</view>

        代码添加后编辑效果如下：

1.2  更改图片大小

        此时该区域不美观，还会将轮播区域图片给覆盖掉，下面我们找到index.scss文件，滑动到最下方，使用<view>组件的image，进行调整图片的大小如下图：

此时的代码片段：

// 商品导航区域
.good-nav{
  view {
    image{
      width: 80rpx;
      height: 80rpx;
    }
  };
}

        此时的布局为上下，我们要想给他换成水平可以在父进程中加入：

  display: flex;
  justify-content: space-between;

        显示效果如下：

        现在此时的代码片段：

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;

  view {
    image{
      width: 80rpx;
      height: 80rpx;
    }
  };
}

1.3  文字和图片呈现上下结构

        此时的文字和图片是混搭的，我们要想将其改成上下结构，可以在<view>组件中加入：

    display: flex;
    flex-direction: column;

        展示效果如下：

        此时的代码片段：

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;

  view {
    display: flex;
    flex-direction: column;
    
    image{
      width: 80rpx;
      height: 80rpx;
    }
  };
}

1.4  更改字体大小，增加文字和图片之间的间隙 

      此时字体过大，明确文字和上方图片太过连接，我们可以在<view>中添加text进行更改字体大小，以及增大间隙：

    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }

        完成效果如下：

        此时的代码片段：

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;

  view {
    display: flex;
    flex-direction: column;

    image{
      width: 80rpx;
      height: 80rpx;
    }

    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  };
}

1.5  图片和文字垂直对齐

        在<view>组件中添加：

    align-items: center;

        使文字和图片对齐，效果如下：

        此时的代码片段：

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;

  view {
    display: flex;
    flex-direction: column;
    align-items: center;  

    image{
      width: 80rpx;
      height: 80rpx;
    }

    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  };
}

1.6  更改背景颜色

        此时区域的区分不明显，我们在父中将其改为白色：

  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

        效果如下：

        此时的代码片段：

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    display: flex;
    flex-direction: column;
    align-items: center;  

    image{
      width: 80rpx;
      height: 80rpx;
    }

    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  };
}

1.6  本节完整代码

index.wxml：

<!-- view 小程序提供的容器组件，可以当成div使用-->

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper：滑块视图容器，其中只能放置 swiper-item 组件 -->
  <!-- autoplay实现轮播图的自动切换 -->
  <!-- interval切换时间 -->
  <!-- indicator-dots下方小圆点 -->
  <!-- circular循环 -->
  <!-- indicator-color小圆点颜色 -->
  <!-- indicator-active-color激活小圆点颜色 -->
  <swiper 
    autoplay 
    interval="2000" 
    indicator-dots 
    circular
    indicator-color="#fff"
    indicator-active-color="#f3514f"
  >
    <!-- swiper-item： 只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项 -->
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-1.jpg" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-2.jpg" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-3.jpg" 
      mode="" 
      />   
    </swiper-item>
  </swiper>
</view>

<!-- 公司信息 -->
<view class="info">
  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100%好评</text>
</view>

<!-- 商品导航 -->
<view class="good-nav">
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
  <view>
  <image src="../../picture/images/cate-1.png" mode=""/>
  <text>鲜花玫瑰</text>
  </view>
</view>

<!-- 推荐商品 -->
<view class="good-hot"></view>

<!-- src:图片的资源地址-->
<!-- mode:图片的裁剪和缩放模式-->
<!-- show-menu-by-longpress：长安展示菜单-->
<!-- <image 
  src="../../picture/traffic/1.png" 
  mode="aspectFit" 
  show-menu-by-longpress
  lazy-load
  /> -->

<!-- user-select：长按以后选中文本
<text user-select space="nbsp">情     人节</text> -->

index.scss：


page{
  height: 100vh;
  background-color: #efefef !important;

  // 四周也有间隔
  padding: 16rpx;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  // 与上一个的间隔
  >view{
    &:nth-child(n+2)
    {
      margin-top: 16rpx;
    }
  }
}

//轮播图区域的样式
.swiper{
  border-radius: 10rpx;
  overflow: hidden;

  swiper{
    height: 360rpx;
    // background-color: skyblue;

    swiper-item{
      image{
        width: 100%;
        height: 100%;

        border-radius: 10rpx;
      }


      //&在Sass中代表的是父选择器，引用的意思
      //swiper-item:first-child
      // &:first-child{
      //   background-color: lightsalmon;
      // }
      // &:first-child{
      //   background-color: lightseagreen;
      // }
    }
  }
}

.info{
  display:flex;
  // 四个组件的布局方式
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

// 商品导航区域
.good-nav{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    display: flex;
    flex-direction: column;
    align-items: center;  

    image{
      width: 80rpx;
      height: 80rpx;
    }

    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  };
}

注意：更改自己的图片文件路径

微信小程序开发_时光の尘的博客-CSDN博客

时光の尘
关注
  • 11
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
计算机专业毕业设计-微信小程序案例-微信小程序图书馆座位再利用系统-毕设源码+说明文档.rar
03-09
**微信小程序图书馆座位再利用系统** **一、资源概述** 本资源是一套完整的小程序前端+后端代码及相关文档，旨在实现一个高效、便捷的图书馆座位再利用系统。该系统能够帮助用户预订、查询和释放图书馆座位，同时提供管理员后台管理功能。基于微信小程序平台开发，用户无需下载安装即可使用，极大地提高了使用的便捷性。 **二、核心功能** 1. **座位查询与预订**：用户可实时查看图书馆各区域的座位使用情况，并在线预订。 2. **座位释放与续订**：用户临时离开时可选择释放座位，其他用户可迅速预订；支持座位续订功能。 3. **个人中心**：用户可查看和管理自己的预订记录、收藏座位等。 4. **管理员后台管理**：管理员可对座位信息、用户订单等进行管理和统计。 **三、技术架构** 前端采用微信小程序原生开发，后端采用Node.js+MySQL架构，确保系统稳定性和可扩展性。 **四、二次开发定制** 本系统代码结构清晰，注释详细，便于二次开发和定制。开发者可根据自身需求进行功能扩展或优化，如增加预约提醒功能、引入地图导航等。 **五、总结** 本资源为计算机专业毕业设计提供了一个实用且具有挑战性的课题。通过开发微信小程序图书馆座位再利用系统，学生不仅能够熟悉微信小程序的开发流程和技术要点，还能提升解决实际问题的能力。同时，该系统在实际应用中也将产生积极的社会效益，推动图书馆资源的合理分配和利用。
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
12-08
这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。 ​ 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，屏幕会乱划。所以针对性的改动了这些功能，因为才学小程序两三天，所以其中踩了很多坑，但好在最后效果还是达到了。 下面是效果图： 原理其实就是通过将原来的头禁用，然后PAGE自然而然的顶上去以后，定义一个头的组件，将他设
微信小程序中进行地图导航功能的实现方法
01-03
前段时间一直都在做小程序做了两个月了，其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的，我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照！       好这次我们来开始我们的开发，其实微信小程序里面是不能导航的，原因是小程序的代码最多只能有1M，他的运行内存只能有10M，一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的，但是应用外呢！      我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能，但是高德地图和腾讯地图都会有响应的SDK，可是小程序不同，尽管上面也有小程序的SDK
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序固定标签导航，点击标签滑动到相应内容，滚动内容切换相应标签
憨虫子的博客
06-21 9062
先来看一下效果图： 仿淘宝做的一个微信小商城的商品详情界面，点击顶部的宝贝、评论和详情标签时，页面滑动到相应的内容区域，同时滚动页面内容时，自动切换相应的导航标签。当然，这也适应于其他场景。 先来看一下wxml代码，其中一些wxml代码省略，但这并不会影响效果的实现，所以省略也无妨。 <view class="topnav" hidden='{{hiddenTopNav}}'&g...
微信小程序——自定义导航栏
Willow_Spring的博客
11-03 131
在一定情况下，我们需要用到自定义的导航，在此记录 取消原生头部 "navigationStyle": "custom" 获取胶囊的信息 wx.getMenuButtonBoundingClientRect() getMeunInfo() { let Menuinfo = wx.getMenuButtonBoundingClientRect() // @ts-ignore console.log("Menuinfo", Menuinfo); // 获取设备信息
小程序怎么自定义导航栏，导航栏放图片、设置高度
Counter-Strike大牛
10-27 1万+
这样就搞定了，希望你们的logo比我的好看。今天来说一下小程序的自定义导航栏。
总结-微信小程序自定义顶部导航(超详细)附加效果图
easttour的博客
10-25 1万+
一、在需要设置头部导航栏的页面中通过json配置 "navigationStyle":"custom" ，自定义导航栏，只保留胶囊按钮，效果如下： 二、做完上面的步骤，基本上就可以自定义导航栏了，当然，这还没完，从页面上可以看出，页面里的内容被挡住了，可以通过页面样式加上内边距内容就出来了： 三、可以看出这个内边距是固定死了的，不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值： 1. 整个导航栏的高度； 2. 胶囊按钮与顶部的距离； 3...
微信小程序导航条配置图片背景
RealizeInnerSelf丶
08-23 5777
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊，其他页面纯色导航条（沿用微信那套）相关代码如果你觉得写的不错或者帮到你了，记得给我点个赞哟~ 微信小程序导航条配置图片背景 需要实现通栏背景的效果（导航那里还有背景图片） 全部页面替换 如果自定义导航栏，会存在需要考虑的问题 如果有上一页，就返回上一页，否则直接返回首页（首页），图标也要跟着换 标题取配置里的（如果可以的话，否则就用组件传参，去掉配置里的，以免造成误解） 背景图片拼接（首页的时候） 就首页特殊，其他页面纯色导航条（
微信小程序+腾讯地图开发实现路径规划绘制
12-09
我们想用微信小程序实现在map>组件上自定义显示导航路径，但是目前为止官方并未给出相应的方法实现，map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的， ...
微信小程序开发教程---创建第一个微信小程序
03-29
　勾选“在当前目录中创建quick start项目”后，点击“添加项目”按钮，即已成功创建了我们第一个微信小程序项目——Hello WXapplet。   开发者工具操作与使用 　(此图片来源于网络，如有侵权，请联系删除! ) 　...
案例033:基于微信小程序的商品展示系统设计与实现
2301_79727522的博客
11-27 257
随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，微信小程序被用户普遍使用，为方便用户能够可以随时进行小程序的相应信息内容的管理，特开发了基于微信小程序的商品展示系统小程序。
微信小程序(一)：微信小程序实现底部导航菜单
qq_67449756的博客
11-18 4817
在app.json的下面输入tabBar,会直接提示 tabBar,直接回车就行，记得先打逗号分隔开哦（新手小白特别要注意！在项目目录里面创建static文件夹用于存放静态资源，在static下面创建TabBar文件夹，将你准备的icon图标放进去。以上则是我所掌握的微信小程序制作底部导航菜单的全部内容，希望能对你有帮助！复制以上四个参数，在list里面进行添加，添加四个（我的是四个）。底部导航菜单是一个经常使用的功能，有很多的好处。里面的名称自己定义哦！恭喜你完成底部导航栏的制作！
微信小程序标题栏和导航栏的设置 ： 微信小程序教程系列07
梦之归途的博客
07-17 2393
设置标题栏 标题栏window 在app.json文件里面，通过window对象里面的属性进行设置 示例： app.json： 运行： 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 Ti...
微信小程序|订单栏和商品导航栏
算法与编程之美
03-21 2264
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述随着小程序的快...
微信小程序如何设置自定义tabBar
Kerwin__li的博客
01-10 2584
在文件根目录创建组件名字为：custom-tab-bar（指定名称）每次在页面显示的时候，通过getTabbar() 方法获取实例修改。此时保存后 tabbar 区域中就是组件中的内容了。在这里我们使用vantweapp 来演示。添加custom属性，让其自定义。：此时已经可以正常切换页面了，但是会出现问题，此时就可以正常显示了，但是有闪烁的情况发生。点击更换pages后，高亮存在问题。
微信小程序教程系列
热门推荐
michael的博客
01-24 8万+
微信小程序教程系列
微信小程序开发计算器
最新发布
04-11
微信小程序开发计算器是一种基于微信平台的应用程序，可以在微信中直接使用。计算器可以实现基本的数学运算，如加减乘除，并提供一些其他功能，如取余、开方等。 在开发微信小程序计算器时，可以使用微信小程序开发工具进行开发。首先，需要创建一个新的小程序项目，并选择计算器模板。然后，在小程序的页面文件中编写计算器的界面布局和样式，可以使用微信小程序提供的组件和样式库。接下来，在逻辑文件中编写计算器的功能代码，包括数学运算和其他功能的实现。最后，可以在微信小程序开发工具中进行预览和调试，确保计算器的功能正常运行。 开发微信小程序计算器需要掌握一些基本的前端开发知识，如HTML、CSS和JavaScript，并且需要了解微信小程序的开发规范和API。此外，还可以使用一些前端框架或库来简化开发过程，如Vue.js或React等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光の尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值