精华内容
下载资源
问答
  • 使用微信小程序的框架完成的;公司需要,开始没找到,后来放弃了,就自己写了一下,发现虽然不难,但是也听绕的
  • 三级分类(高仿淘宝页面分类) ** 初步的二级页面参考的这个文章的代码:https://blog.csdn.net/luowei85520/article/details/90510311 这个基础上改成的淘宝三级分类 界面: 1、WXML代码 <view class=...

    **

    三级分类(高仿淘宝页面分类)

    **
    初步的二级页面参考的这个文章的代码:https://blog.csdn.net/luowei85520/article/details/90510311
    这个基础上改成的淘宝三级分类
    界面:
    在这里插入图片描述

    1、WXML代码

    <view class="container">
      <!-- 左边的  -->
      <scroll-view class='nav_left' scroll-y='true'>
      <!-- 一级 -->
        <block wx:for="{{cateItems}}" wx:key="{{index}}">
          <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>
      </scroll-view>
      <!-- 右边的 -->
      <scroll-view class="nav_right" scroll-y="true">
      <!-- 二级 -->
          <block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}">
         <text>{{item.name}}</text>
        <!--三级-->
        <view class="{{topx}}">
          <block wx:for="{{item.son}}" wx:key="{{item.child_id}}">
            <view class="nav_right_items" data-id="{{item.son_id}}">
                <image src="{{item.image}}"></image>
                <text>{{item.name}}</text>
            </view>
          </block>
        </view>
       </block>
      </scroll-view>
    </view>
    
    
    

    2、WXSS代码

    .container{
      position:fixed;
      width:100%;
      height:100%;
      background-color:#FFF;
    }
    .nav_left{
      width:25%;
      height:100%;
      background:#F2F2F2;
      text-align:center;
      position:absolute;
      top:0;
      left:0;
    }
    .nav_left .nav_left_items{
      height:100rpx;
      line-height:100rpx;
      font-size:28rpx;
    }
    .nav_left .nav_left_items.active{
      position:relative;
      background:#FFF;
      color:#FF5000;
    }
    .nav_left .nav_left_items.active::before{
      display: inline-block;
      width:6rpx;
      height:60rpx;
      background:#FE5723;
      content:'';
      position:absolute;
      top:20rpx;
      left:0;
    }
    .nav_right{
      position:absolute;
      top:0;
      right:0;
      width:75%;
      height:100%;
    }
     
    .nav_right .nav_right_items{
      float: left;   
      width: 33.33%; 
      text-align: center;  
      padding:30rpx 0;
    } 
    .nav_right .nav_right_items image{
      width: 120rpx;  
      height: 120rpx; 
    } 
    .nav_right .nav_right_items text{
      display: block;  
      margin-top: 20rpx;  
      font-size: 28rpx;  
      overflow: hidden;  
      white-space: nowrap;  
      text-overflow: ellipsis;  
    } 
    .nocate{
      padding:100rpx;
      text-align: center;  
    } 
     
    .nocate image{
      width:70rpx;
      height:70rpx;
    }
    .nocate text{
      font-size:28rpx;
      display:block;
      color:#BBB;
    }
    /*隐藏滚动条*/
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
      color: transparent;
    }
    
    .topx {
      width: 90%;
      /* height: 700rpx; */
      margin: 30rpx auto;
      z-index: 1;
      border-radius: 10rpx;
     background-image: url(https://wx2.sinaimg.cn/mw1024/006cV2kkly1g8atticb9nj30yj22omye.jpg);
      background-size: cover;
    }
    

    3、JS数据

    Page({
    
      /**
       * 页面的初始数据
       */
      
      data: {
        //一级
        cateItems:[
          {
            cate_id:1,
            cate_name:'女装',
            //二级
            children: [
              { 
                child_id: 1, 
                name: '猜你喜欢',
                //三级
                son:[
                  {
                    son_id:1,
                    name:'牛仔裙',
                    image:'../../images/jeanskirt.png'
                  },
                  {
                    son_id:2,
                    name:'短外套',
                    image:'../../images/overcoa.png'
                  },
                  {
                    son_id:3,
                    name:'吊带裙',
                    image:'../../images/dress.png'
                  },
                  {
                    son_id:4,
                    name:'连衣裙',
                    image:'../../images/dress(1).png'
                  },
                  {
                    son_id:5,
                    name:'时尚套装',
                    image:'../../images/suit.png'
                  },
                  {
                    son_id:6,
                    name:'衬衫',
                    image:'../../images/shirt.png'
                  },
                  {
                    son_id:7,
                    name:'T恤',
                    image:'../../images/Tshirt.png'
                  },
                  {
                    son_id:8,
                    name:'卫衣',
                    image:'../../images/sweater.png'
                  },
                  {
                    son_id:9,
                    name:'休闲裤',
                    image:'../../images/pants.png'
                  }
                ]
              }, 
              { 
                child_id: 2, 
                name: '流行趋势', 
                son:[
                  {
                    son_id:1,
                    name:'方领连衣裙',
                    image:'../../images/squarecollardress.png'
                  },
                  {
                    son_id:2,
                    name:'泡泡袖',
                    image:'../../images/puffdress.png'
                  },
                  {
                    son_id:3,
                    name:'西装连衣裙',
                    image:'../../images/westerndress.png'
                  },
                  {
                    son_id:4,
                    name:'洛丽塔',
                    image:'../../images/Lolita.png'
                  },
                  {
                    son_id:5,
                    name:'JK制服',
                    image:'../../images/jkdress.png'
                  },
                  {
                    son_id:6,
                    name:'束脚裤',
                    image:'../../images/anklepants.png'
                  }
                ]
              },
              { 
                child_id: 3, 
                name: '女裙',
                son:[
                  {
                    son_id:1,
                    name:'连衣裙',
                    image:'../../images/dress(1).png'
                  },
                  {
                    son_id:2,
                    name:'半身裙',
                    image:'../../images//jkdress.png'
                  },
                  {
                    son_id:3,
                    name:'旗袍',
                    image:'../../images/chipao.png'
                  },
                ]
              },
              { 
                child_id: 4, 
                name: '外套',
                son:[
                  {
                    son_id:1,
                    name:'短外套',
                    image:'../../images/suit.png'
                  },
                  {
                    son_id:2,
                    name:'风衣',
                    image:'../../images/windbreaker.png'
                  },
                  {
                    son_id:3,
                    name:'西装',
                    image:'../../images/westerndress.png'
                  },
                  {
                    son_id:4,
                    name:'毛呢大衣',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:5,
                    name:'棉衣棉服',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:6,
                    name:'羽绒服',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:7,
                    name:'皮草',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:8,
                    name:'皮衣',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:9,
                    name:'皮衣',
                    image:'../../images/clothes.png'
                  }
                ]
              },
              { 
                child_id: 5, 
                name: '上装',
                son:[
                  {
                    son_id:1,
                    name:'T恤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:2,
                    name:'衬衫',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:3,
                    name:'雪纺衫',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:4,
                    name:'卫衣',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:5,
                    name:'毛衣',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:6,
                    name:'马甲',
                    image:'../../images/clothes.png'
                  },
                 
                ],
              },
               
               
              { 
                child_id: 6, 
                name: '特色女装',
                son:[
                  {
                    son_id:1,
                    name:'中老年女装',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:2,
                    name:'大码女装',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:3,
                    name:'皮衣',
                    image:'../../images/clothes.png'
                  }
                 
                ]
              },
              { 
                child_id: 7, 
                name: '女裤',
                son:[
                  {
                    son_id:1,
                    name:'休闲裤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:2,
                    name:'牛仔裤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:3,
                    name:'打底裤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:4,
                    name:'西装裤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:5,
                    name:'棉裤羽绒裤',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:6,
                    name:'皮衣',
                    image:'../../images/clothes.png'
                  }
                 
                ]
              },
              { 
                child_id: 8, 
                name: '套装',
                son:[
                  {
                    son_id:1,
                    name:'时尚套装',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:2,
                    name:'运动套装',
                    image:'../../images/clothes.png'
                  },
                  {
                    son_id:3,
                    name:'皮衣',
                    image:'../../images/clothes.png'
                  }
                ]
              },
              { 
                child_id: 9, 
                name: '服饰服务',
                son:[
                  {
                    son_id:1,
                    name:'洗衣服务',
                    image:'../../images/clothes.png'
                  },
                 
                ]
              },
            ]
          },
          {
            cate_id:2,
            cate_name:'美妆',
            children: [
              { 
                child_id: 1, 
                name: '猜你喜欢',
                son:[
                  {
                    son_id:1,
                    name:'彩妆套装',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:2,
                    name:'粉饼',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:3,
                    name:'甲片',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:4,
                    name:'指甲贴',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:5,
                    name:'粉底液',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:6,
                    name:'美甲',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:7,
                    name:'防晒霜',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:8,
                    name:'口红',
                    image:'../../images/makeup.png'
                  },
                  {
                    son_id:9,
                    name:'面膜',
                    image:'../../images/makeup.png'
                  },
                 
                ]
              },
              {
                child_id: 2, 
                name: '美容美体',
                son:[
                  {
                    son_id:1,
                    name:'彩妆套装',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:2,
                    name:'粉饼',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:3,
                    name:'甲片',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:4,
                    name:'指甲贴',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:5,
                    name:'粉底液',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:6,
                    name:'美甲',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:7,
                    name:'防晒霜',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:8,
                    name:'口红',
                    image:'../../images/makeup2.png'
                  },
                  {
                    son_id:9,
                    name:'面膜',
                    image:'../../images/makeup2.png'
                  },
                 
                ]
              },
              {
                child_id: 3, 
                name: '彩妆',
                son:[
                  {
                    son_id:1,
                    name:'彩妆套装',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:2,
                    name:'粉饼',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:3,
                    name:'甲片',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:4,
                    name:'指甲贴',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:5,
                    name:'粉底液',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:6,
                    name:'美甲',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:7,
                    name:'防晒霜',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:8,
                    name:'口红',
                    image:'../../images/makeup3.png'
                  },
                  {
                    son_id:9,
                    name:'面膜',
                    image:'../../images/makeup3.png'
                  },
                 
                ]
              }
            ]
          },
          {
            cate_id:3,
            cate_name:'饰品'
          },
          {
            cate_id: 4,
            cate_name: '百货'
          },
          {
            cate_id: 5,
            cate_name: '医药'
          },
          {
            cate_id: 6,
            cate_name: '进口'
          },
          {
            cate_id: 7,
            cate_name: '手机'
          },
          {
            cate_id: 8,
            cate_name: '箱包'
          },
          {
            cate_id: 9,
            cate_name: '鞋靴'
          },
          {
            cate_id: 10,
            cate_name: '内衣'
          },
          {
            cate_id: 11,
            cate_name: '母婴'
          },
          {
            cate_id: 12,
            cate_name: '男装'
          },
          {
            cate_id: 13,
            cate_name: '食品'
          }
        ],
        curNav:1,
        curIndex:0,
      },
     
      switchRightTab:function(e){
        let id = e.target.dataset.id,index=e.target.dataset.index;
        this.setData({
          curNav:id,
          curIndex:index,   
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })
    
    展开全文
  • 但是又时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库 一,老规矩,先看效果图 先来给大家分析下原理 二,原理分析 首先来分析下有那...

    如果大家一直读石头哥的文章,或者看石头哥的视频,肯定知道,石头哥的点餐小程序有实现二级菜品或者商品分类。

    如下图

    但是有时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库

    一,老规矩,先看效果图


    先来给大家分析下原理

    二,原理分析

    首先来分析下有那三级

    可以看出,我们最顶部是一级菜单,左侧是二级菜单,右侧是最终的三级列表。

    我们来理一理层级关系

    • =宿舍楼号
    • ====宿舍号
    • ========学生

    聪明的人肯定知道,我们是一个宿舍楼里包含很多宿舍,宿舍里有包含很多学生。这样我们的三级就是 楼号》宿舍》学生。

    当我们切换楼号时,就会重新获取当前楼号包含的宿舍。
    比如下图左为惠兰楼,右为学苑楼的数据,可以看出每个楼里的宿舍和学生信息。

    分析完原理,我们就来看技术实现了。

    三,获取分类数据

    这里先给大家说下,我这里是用一张表来存的所有信息

    既然是一张表存所有数据,我们就要做下分组,看数据里都有哪些楼号。

    3-1,借助group实现楼号分组(一级数据)

    在这里插入图片描述
    具体代码如下

    然后获取到的数据如下

    可以看出我们一共有11个宿舍楼。就是我们顶部的这些区域

    3-2,借助group和match实现宿舍分组(二级数据)


    这个时候,我们就要根据用户选择的楼号,来对当前楼号下所有数据进行分组了

    分组后的数据如下

    可以看出,前进楼有两个宿舍

    3-3,借助where获取宿舍里的学生数据(三级)


    获取的数据如下

    到这里我们的三级分类就实现了

    四,完整项目代码

    下面把完整项目代码,贴出来给大家

    4-1,wxml

    <!-- 导航栏 -->
    <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
      <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
        <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item._id}}</view>
      </view>
    </scroll-view>
    <view class="container">
      <!-- 左边的  -->
      <scroll-view class='nav_left' scroll-y='true'>
        <block wx:for="{{lefts}}" wx:key="{{index}}">
          <view class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-index='{{index}}'>
            {{item._id}}</view>
        </block>
      </scroll-view>
      <!-- 右边的 -->
      <scroll-view class="nav_right" scroll-y="true">
        <view class="{{topx}}">
          <block wx:for="{{rights}}" wx:key="index">
            <view class="nav_right_items" data-id="{{item._id}}">
              <image src="{{item.touxiang}}"></image>
              <text>{{item.mingzi}}</text>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    

    4-2,wxss样式

    /* 导航栏布局相关 */
    .navbar {
    	width: 100%;
    	height: 90rpx;
    	/* 文本不换行 */
    	white-space: nowrap;
    	display: flex;
    	box-sizing: border-box;
    	border-bottom: 1rpx solid #eee;
    	background: #fff;
    	align-items: center;
    	/* 固定在顶部 */
    	position: fixed;
    	left: 0rpx;
    	top: 0rpx;
    }
    
    .nav-item {
    	padding-left: 25rpx;
    	padding-right: 25rpx;
    	height: 100%;
    	display: inline-block;
    	/* 普通文字大小 */
    	font-size: 28rpx;
    }
    
    .nav-text {
    	width: 100%;
    	height: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	letter-spacing: 4rpx;
    	box-sizing: border-box;
    }
    
    .tab-on {
    	color: #000080;
    	/* 选中放大 */
    	font-size: 38rpx !important;
    	font-weight: 600;
    	border-bottom: 4rpx solid #000080 !important;
    }
    
    /* 正文部分 */
    .container {
    	position: fixed;
    	width: 100%;
    	height: 90%;
    	top: 100rpx;
    	background-color: #FFF;
    }
    
    .nav_left {
    	width: 25%;
    	height: 100%;
    	background: #F2F2F2;
    	text-align: center;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    
    .nav_left .nav_left_items {
    	height: 100rpx;
    	line-height: 100rpx;
    	font-size: 28rpx;
    }
    
    .nav_left .nav_left_items.active {
    	position: relative;
    	background: #FFF;
    	color: #000080;
    }
    
    .nav_left .nav_left_items.active::before {
    	display: inline-block;
    	width: 6rpx;
    	height: 60rpx;
    	background: #000080;
    	content: '';
    	position: absolute;
    	top: 20rpx;
    	left: 0;
    }
    
    .nav_right {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 75%;
    	height: 100%;
    }
    
    .nav_right .nav_right_items {
    	float: left;
    	width: 33.33%;
    	text-align: center;
    	padding: 30rpx 0;
    }
    
    .nav_right .nav_right_items image {
    	width: 120rpx;
    	height: 160rpx;
    }
    
    .nav_right .nav_right_items text {
    	display: block;
    	margin-top: 20rpx;
    	font-size: 28rpx;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    }
    
    .nocate {
    	padding: 100rpx;
    	text-align: center;
    }
    
    .nocate image {
    	width: 70rpx;
    	height: 70rpx;
    }
    
    .nocate text {
    	font-size: 28rpx;
    	display: block;
    	color: #BBB;
    }
    
    /*隐藏滚动条*/
    ::-webkit-scrollbar {
    	width: 0;
    	height: 0;
    	color: transparent;
    }
    
    .topx {
    	width: 90%;
    	/* height: 700rpx; */
    	margin: 30rpx auto;
    	z-index: 1;
    	border-radius: 10rpx;
    	background-size: cover;
    }
    

    4-3,js实现分类逻辑

    const db = wx.cloud.database()
    const $ = db.command.aggregate
    Page({
    	data: {
    		tabs: [],
    		tabCur: 0, //默认选中
    		lefts: [],
    		leftCur: 0,
    		rights: [],
    
    	},
    	onLoad: function (options) {
    		db.collection('demo').aggregate()
    			.group({
    				_id: '$louhao'
    			})
    			.end()
    			.then(res => {
    				console.log('楼号列表', res)
    				this.setData({
    					tabs: res.list
    				})
    				this.sushehao(res.list[0]._id)
    			})
    	},
    	//加载当前楼号所有的宿舍号
    	sushehao() {
    		let louhao = this.data.tabs[this.data.tabCur]._id
    		db.collection('demo').aggregate()
    			.match({
    				louhao
    			})
    			.group({
    				_id: '$sushe'
    			})
    			.sort({
    				sushe: -1 //宿舍号升序排列
    			})
    			.end()
    			.then(res => {
    				console.log(louhao + '宿舍号列表', res)
    				this.setData({
    					lefts: res.list
    				})
    				this.xuesheng()
    			})
    	},
    	//加载当前宿舍号里所有的学生
    	xuesheng() {
    		let louhao = this.data.tabs[this.data.tabCur]._id
    		let sushe = this.data.lefts[this.data.leftCur]._id
    		db.collection('demo')
    			.where({
    				louhao,
    				sushe
    			}).get()
    			.then(res => {
    				console.log(louhao + sushe + '室学生列表', res)
    				this.setData({
    					rights: res.data
    				})
    			})
    	},
    	//顶部选择分类条目
    	tabSelect(e) {
    		this.setData({
    			tabCur: e.currentTarget.dataset.id,
    			scrollLeft: (e.currentTarget.dataset.id - 2) * 200
    		}, success => {
    			this.sushehao()
    		})
    	},
    	//左侧条目选择
    	switchLeftTab(e) {
    		let index = e.target.dataset.index;
    		this.setData({
    			leftCur: index,
    		}, success => {
    			this.xuesheng()
    		})
    	},
    })
    

    4-4,记得修改数据表权限

    修改权限为所有用户可读,仅创建者可读写

    到这里我们的三级分类就完整的实现了。关于excel数据批量导入,我下节再做讲解的。欢迎关注,欢迎留言交流。

    展开全文
  • 功能模块有: 1.首页轮播图 2.商城二级分类功能,商城上架商品(规格库存)功能 3.在线支付功能 4.分享功能 5.收藏商品功能 6.收货地址管理功能 7.购物车 8.在线客服(微信客服) 9.联
  • 微信小程序实用组件:省市区三级联动 2019年06月05日 14:30:33叶落无痕123阅读数 277更多 分类专栏:微信小程序 作者:Edik 预览图片: 项目地址:https://git.oschina.net/edik/wechat-three-level 项目下载:...

    微信小程序实用组件:省市区三级联动

    2019年06月05日 14:30:33 叶落无痕123 阅读数 277更多

    分类专栏: 微信小程序

    作者:Edik
    预览图片:
     
    项目地址:https://git.oschina.net/edik/wechat-three-level
    项目下载:  edik-wechat-three-level-master.zip (38.85 KB, 下载次数: 7) 

    展开全文
  • 微信小程序之商城分类详情

    千次阅读 2017-01-17 21:02:46
    近期,我们是将一个商城放在小程序中进行开发,下面介绍一下根据第三级分类查出商品。 1、我们首先需要将第三级分类的名称传到我们需要商品详情的页面中。我们可以使用navigator来进行跨页面传值。 示例代码:...

    近期,我们是将一个商城放在小程序中进行开发,下面介绍一下根据第三级分类查出商品。


    1、我们首先需要将第三级分类的名称传到我们需要商品详情的页面中。我们可以使用navigator来进行跨页面传值。

    示例代码:


    像上面的图片中,值传给的是category文件夹下的categoodslist页面。然后再通过api接口获取商品数据。

    2、在提交的js中通过api接口获取数据


    这样,我们打印出来的数据,可以在调试中看到,在我调用的接口中,获取打印出来的数据是这样的。


    3、我们就可以将分类的相关的商品数据展示在页面中了。


    然后我们根据分类获取商品信息的部分就完成了。在这里需要注意的就是传值到另一个页面这一部分。


    展开全文
  • 关于垃圾分类的简单小程序,可用于初次学习微信小程序的人参考练手。包含首页、再生产、分类三大模块,首页是关于垃圾分类的一些简介;再生产是关于垃圾变废为宝的tab切换列表,包含如何回收利用的图文教程;分类是...
  • 由于项目频繁用到三级联动,比如地区、时间、分类,这些网络上不能满足,所以我们通过后台调用的方式来实现 后台我使用的是PHP语言 目录结构: |-client |---pages |-----index |-------index.js //包含初始化数据...
  • 右侧展示二级分类和三级分类 其他说明 左右两侧分别滚动 点击左侧一级分类时,显示对应的二级和三级分类 02.静态页面-练习 抽取首页搜索链接为组件 原因:首页和分类的搜索链接是一样的 步骤 新建...
  • 小程序bug

    2019-11-05 12:23:42
    在写分类页面时,获取二级和三级分类 当页面初始化时,默认选中的第一级分类,获取不到它的二级和三级分类。 解决:需要在获取所有分类时候,获取一下默认选中的一级分类,中的二级和三级。 this.secondCate = res....
  • ■增加小程序模块,快速开发小程序。 ■增加:云端建站功能,全新的在线拖拽建站。 ■增加:数据表自由导出为Excel(扩展--数据导出为Excel),自由导出您的任何意表单数据,对于站长业说可以更好的管理自主数据。 ...
  • 头条抖音字节小程序

    2020-06-15 13:57:28
    一级分类 二级分类 三级分类 资质要求 服务类 快递、物流 查件 / 服务类 丽人 美甲 / 服务类 丽人 美容 / 服务类 丽人 美睫 / 服务类 丽人 美发 / 服务类 丽人 纹身 / 服务类 丽人 祛痘 / 服务类 丽人 纤体瘦身 / ...
  • 商城、diy版权设置 联系我们链接,无法拨打问题,二级、三级分类未启用也在小程序端展示, 未开启form表单情况下,多商户配置保存报错,角色管理编辑报错, 商品分类下无商品情况无法删除,子账号未获取积分商城权限...
  • 支持团长三级分销 支持商品详情页添加视频播放 支持七牛云远程附件 支持不同商品,不同提成比例设置 支持商品多规格定义 支持独立供应商订单分拆 支持后台满减和满多少可下单 支持redis解决高并发场景 新人专享/秒杀...
  • 企业通过在微信上开通微信三级分销商城,员工和经销商在公司的微信分销商城基础上生成专属于自己的一个分销商城(员工与经销商即二级分销商),员工的朋友或者经销商的客户在员工或经销商的个人微信商城基础上再次生成...
  • 博观商城小程序,会员千人千面价格显示,多会员价,多级商品分类聚合显示,多页面DIY,支持多门店聚合商城系统,支持同城配送,自定义配送范围,多级自提点门店商品自提。 1、消息模板(一键配置) 2、三级分销 3、...
  • 小程序个人开放的服务范围类目表

    千次阅读 2018-01-05 15:34:28
    三级分类 快递业与邮政 快递、物流 寄件/收件 查件 邮政 / 装卸搬运 / 教育 教育信息服务 / 特殊人群教育 / ...
  • 洗衣店2.4.8小程序.zip

    2020-09-29 14:49:42
    洗衣店新增功能: 1、订单状态 通知 2、管理员手机端增加会员充值功能 3、优化下单页面功能 4、增加管理员端 跑腿人员结账功能 ...13、增加二级分类 14、增加线下优惠卷功能 15、增加对接第方跑腿(顺丰)
  • 禾匠4.4.8全开源全插件全模板前后端,...修复:一级分类下的样式四,购物车显示问题; 版本号: 4.4.7 发布时间:2021-1-22 注:本次更新需发布小程序端 优化:收银台商品显示对应规格图片; 修复:DIY添加批发商品;
  • 1.增加:核心函数新增新闻分类函数news_sort_list2,支持二级分类 2.优化:小程序新增分享按钮,修改微信登录接口为最新版本 3.修复:修复了购买商品结算页面重复提交时重复扣款的bug S-CMS电子商城系统系统(含微信...
  • 菜谱分享网站微信小程序...分类表(两级或三级分类) 用户表 用户收藏表 用户表(gourmet_user) 字段名 类型 备注 id int 主键,自增 nick_name varchar 用户昵称 CREATE TABLE `gourmet_user` ( `id` i
  • 主要功能:首页:(轮播图、活动快速入口、商品推荐)、搜索 分类: 商品分类三级显示)、商品详情、拼团or单独购买、订单结算、拼团状态 消息:(客服、通知、物流、活动)我的:收藏、足迹、优惠券、订单管理、...
  • 利用小程序的云数据库模拟网络接口数据 小程序云数据库真的很牛,它的数据不限制长度,不限制维度,一条数据可以写成一类数据,就像接口一样。...首先将数据分层,画出粗略的数据结构图,下面将会以商品分类数据进行
  • 包括完整的产品展示,精美留言本,经理致辞,公司...其中本系统的产品展示可以实现三级分类,无限产品后台自由添加。包含产品快速导航,产品简介,下订单,产品成分说明,常见问题说明,大小缩略图等非常实用的功能!
  • 主要功能:首页:(轮播图、活动快速入口、商品推荐)、搜索 分类: 商品分类三级显示)、商品详情、拼团or单独购买、订单结算、拼团状态 消息:(客服、通知、物流、活动)我的:收藏、足迹、优惠券、订单管理、...
  • 现在要做微信小程序实现这样的效果:三级联动点击。 后台返回的数据如下: ``` { "classify": "施工分类", "category": "工作种类", "requireName": "其他要求", "data": [ { "id": 1, "title": ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 910
精华内容 364
关键字:

小程序三级分类