微信小程序简易朴朴超市

Mengxy灬

已于 2023-08-29 10:24:49 修改

阅读量1.5k

点赞数

文章标签：微信小程序

于 2022-04-03 11:21:29 首次发布

本文链接：https://blog.csdn.net/qq_47548037/article/details/123934607

版权

wxml

<view class="allbox">
  <view class="box1">
    <view class="input_box">
      <input type="text" placeholder-class="placeholder" placeholder="请输入关键字搜索" />
    </view>
    <view class="button_box">
      <button size="mini" type="primary">搜索</button>
    </view>
  </view>
  <view>
    <swiper autoplay="true" indicator-dots="true" >
      <swiper-item wx:for="{{img_Urls}}" wx:key="*this">
        <image src="{{item}}" class="img" ></image>
      </swiper-item>
    </swiper>
  </view>

  <view class="box_button">
    <view class="btn">
      <image src="/imges/酒水饮料1.png" class="images_button"></image>
      <image src="/imges/粮油.png" class="images_button"></image>
      <image src="/imges/清洁用品.png" class="images_button"></image>
      <image src="/imges/家禽肉类.png" class="images_button"></image>
      <image src="/imges/零食.png" class="images_button"></image>

    </view>
    <view class="btn">
      <text>聚餐酒水</text>
      <text>食用粮油</text>
      <text>清洁物品</text>
      <text>肉类食品</text>
      <text>休闲零食</text>
    </view>
    <view class="btn">
      <image src="/imges/宠物.png" class="images_button"></image>
      <image src="/imges/美妆蛋.png" class="images_button"></image>
      <image src="/imges/母婴玩具.png" class="images_button"></image>
      <image src="/imges/猕猴桃.png" class="images_button"></image>
      <image src="/imges/物品类别.png" class="images_button"></image>
    </view>
    <view class="btn" hover-class="wsui-btn__hover_list">
      <text>宠物用品</text>
      <text>手工美妆</text>
      <text>母婴用品</text>
      <text>新鲜水果</text>
      <text>全部类别</text>
    </view>
  </view>
  <!-- <view>
    <image src="../../imges/实时热卖.png" style="height: 120px; width: 100%;"></image>
  </view> -->

  <button class="tapbtn1" plain="true" bindtap="skyOnclick">
    <!-- <navigator url="http://weibo.com"> -->
      <image class="tapimg1" src='../../imges/实时热卖.png'></image>
    <!-- </navigator> -->
  </button>
  <!-- <button class="tapbtn1" plain="true">
    <img class="tapimg1" src="../../imges/物品类别.png" />
  </button> -->
</view>

wxss

.allbox{
  background-color: white;
}

input{
  border: 1px solid white;
  width: 240px;
  height: 30px;
  padding-left: 10px;
  /* border-top:solid 10rpx #04BE02;
  border-bottom :solid 10rpx #04BE02;
  border-left: solid 10rpx #04BE02;
  border-right: solid 10rpx #04BE02; */
}

.box1{
  flex: 1;
  display: flex;
  flex-direction: row;
  border-top:solid 10rpx #04BE02;
  border-bottom :solid 10rpx #04BE02;
  border-left: solid 10rpx #04BE02;
}

.button_box{
  flex: 1;
  display: flex;
  flex-direction: row;
  background:  #04BE02;
}

.input_box{

}

.placeholder{
  text-align: center;
  color:darkgray;
}

.img{
   height: 100%;
   width: 90%;
   padding-left: 15px;
}

.box_button{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.btn{
  text-align: center;
  display: flex;
  width: 100%;
}

.btn>text{
  padding-left: 20px;
  height: auto;
  width: 90rpx;
}

.images_button{
  text-align:center;
  width: 45px;
  height: 45px;
  padding-left: 14px;
  padding-top: 5px;
}

.tapimg1{  
  width:315px;
  height: 120px;
}

.tapbtn1[plain]{
  padding: 0;
  border:none;   
  width: 315px;
  height: 120px;
}

app.json部分代码：

"window": {

    "backgroundTextStyle": "dark",

    "navigationBarBackgroundColor": "#04BE02",

    "navigationBarTitleText": "朴朴超市",

    "navigationBarTextStyle": "white"

  },

  "tabBar": {

    "color": "#2F0000",

    "selectedColor": "#04BE02",

    "backgroundColor": "#fffff",

    "borderStyle": "black",

    "position": "bottom",

    "list": [

      {

        "pagePath": "pages/main/main",

        "text": "首页",

        "iconPath": "imges/main.png",

        "selectedIconPath": "imges/main.png"

      },

      {

        "pagePath": "pages/selector/selector",

        "text": "分类",

        "iconPath": "imges/分类.png",

        "selectedIconPath": "imges/分类.png"

      },

      {

        "pagePath": "pages/get/get",

        "text": "发现",

        "iconPath": "imges/搜索.png",

        "selectedIconPath": "imges/搜索.png"

      },

      {

        "pagePath": "pages/compare/compare",

        "text": "我的",

        "iconPath": "imges/我的.png",

        "selectedIconPath": "imges/我的.png"

      }

    ]

  },

  

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

实现效果：