微信小程序（三）分类界面

最新推荐文章于 2023-11-07 17:03:43 发布

Zaltana

最新推荐文章于 2023-11-07 17:03:43 发布

阅读量1w

点赞数 18

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/zhoulina815/article/details/123904537

版权

本文介绍了如何使用微信小程序创建分类界面。通过在wxml中使用view组件，结合if条件判断和for循环来动态渲染数据。同时讨论了bindtap和catchtap事件的区别，并展示了如何在js中获取数据以及对应的wxml、wxss文件结构。最后提供了实现效果的截图。

摘要由CSDN通过智能技术生成

分类

先用view写个主盒子，之后里面再写两个view，一个左一个右，

if条件判断，当条件为真时，渲染显示页面，为假时，不渲染

for循环，循环数组并渲染到页面

bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡

js里获取数据

category.wxml

<!--pages/category/category.wxml-->
<!--主盒子-->
<view class="container">
  <!--左侧栏-->
  <view class="nav_left">
    <block wx:for="{
  {cateItems}}">
      <!--当前项的id等于item项的id，那个就是当前状态-->
      <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
      <view class="nav_left_items {
  {curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{
  {index}}" data-id="{
  {item.cate_id}}">{
  {item.cate_name}}</view>
    </block>
  </view>
  <!--右侧栏-->
  <view class="nav_right">
    <!--如果有数据，才遍历项-->
    <view wx:if="{
  {cateItems[curIndex].ishaveChild}}">
      <block wx:for="{
  {cateItems[curIndex].children}}">
        <view class="nav_right_items">
        <!--界面跳转 -->
          <navigator url="../../detail/detail">
            <image src="{
  {item.image}}"></image>
            <text>{
  {item.name}}</text>
          </navigator>
        </view>
      </block>
    </view>
    <!--如果无数据，则显示数据-->
    <view class="nodata_text" wx:else>该分类暂无数据</view>
  </view>
</view>

category.js

Page({
    data: {
      cateItems: [
        {
          cate_id: 1,
          cate_name: "护肤",
          ishaveChild: true,
          children:
          [
            {
              child_id: 1,
              name: '洁面皂',
              image:"https://img.alicdn.com/bao/uploaded/i2/762503384/O1CN01Ontfxf1aruyJmtpoS_!!762503384.jpg" 
            },
            {
              child_id: 2,
              name: '卸妆',
              image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.C-6yBbI2P-r-Jin3