• 微信小程序点击不同的按钮,展示不同的信息内容


    1.有四个导航:推荐、食品、服装、用品;点击不同的按钮,展示不同的内容

    2.wxml

    <view class='nav'>
      <block wx:for="{{nav}}" wx:key="key">
        <view class="{{ curIndex === item.id ? 'txt' : ''}}" data-id="{{item.id}}" bindtap="navTap">{{item.title}}</view>
      </block>
    </view>
    <scroll-view>
      <block wx:for="{{list}}" wx:key="key">
        <block wx:if="{{curNav == 0 }}">
          <view class='msg'>
            <text class='name'>{{item.name}}</text>
            <text class='price'>{{item.price}}</text>
          </view>
        </block>
        <block wx:elif="{{curNav == item.type }}">
          <view class='msg'>
            <text class='name'>{{item.name}}</text>
            <text class='price'>{{item.price}}</text>
          </view>
        </block>
      </block>
    </scroll-view>
    

    2.wxss

    /* pages/nav/nav.wxss */
    .nav{
      display: flex;
      justify-content: center;
      align-items: center;
      height:150rpx;
    }
    .nav view{
      33.33%;
      text-align: center;
    }
    .txt{
      color:#f00;
    }
    .msg{
      height:150rpx;
      display: flex;
      align-items: center;
      border:1px solid #ddd;
      padding:0 60rpx;
    }
    .msg text{
      display: block;
    }
    .msg .name{
      300rpx;
      margin-right:30rpx;
    }
    

    3.js

    data: {
        nav:[
          {
            title:"推荐",
            id:0
          },
          {
            title: "食物",
            id: 1
          },
          {
            title: "服装",
            id: 2
          },
          {
            title: "用品",
            id: 3
          }
        ],
        list:[
          {
            id:1,
            name:'辣条',
            price:3.5,
            type:1
          },
          {
            id: 2,
            name: '辣条1',
            price: 3.5,
            type: 1
          },
          {
            id: 3,
            name: '男装',
            price: 300,
            type: 3
          },
          {
            id: 4,
            name: '豆腐',
            price: 1,
            type: 1
          },
          {
            id: 5,
            name: '女装',
            price: 150,
            type: 2
          },
          {
            id: 6,
            name: '儿童装',
            price: 80,
            type: 2
          },
          {
            id: 7,
            name: '锅',
            price: 58,
            type: 3
          },
          {
            id: 8,
            name: '床上四件套',
            price: 155,
            type: 3
          },
        ],
        curNav:0,
        curIndex:0
      },
      navTap(e){
        let id = e.currentTarget.dataset.id;
        console.log(id);
        this.setData({
          curNav: id,
          curIndex:id
        })
      },
    

      重点:根据商品的type值来判断展示的内容,如果type值为0,展示所有的商品,如果type的值为1,2,3时,显示相应的商品type的信息

  • 相关阅读:
    debian安装后sudo不能用的问题
    分组筛选数据,某个数据字段比如说患者就诊超过一次的,身份证号会重复出现的,sql语句,备忘用的
    《精通Git》翻译系列(二)
    配置mysql允许远程连接
    raspberry pi下使用mp3blaster播放mp3音乐
    MSSQL常用语句备注1
    设计的四大原则
    在树莓派下安装mysql的相关查询记录
    查看数据库日志,收缩数据库
    芒果功效与作用
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/9635497.html
Copyright © 2020-2023  润新知