微信小程序简易朴朴超市

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>
<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>

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"

}

实现效果：

微信小程序简易朴朴超市相关推荐

微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序--简易计算器
一.项目概述本文主要介绍了微信小程序的一个简易计算器的实现代码实例. 实现的功能有: 实现简单的加减乘除删除全部清空小程序页面目录如下: 计算器页面如下: 二.WXML文件编写首先我们对计算 ...
0基础制作微信小程序（案例：超市）
简介:这是不要服务器不要域名,无后台,上传即用的超市小程序,终身使用,无需任何费用.即使你是小白菜鸟都可以使用. 功能:首页轮播.公告.产品展示.底部导航.一键拨号.地图导航等功能. 用途:超市.小卖 ...
微信小程序简易评分样式
微信小程序的简单评分功能实现注意:以下代码加入了Node框架的脚本直接上代码 JS: Page({ data:{ }, showModal:function(){ wx.showModal({ t ...
微信小程序 - 简易天气预报
预览图: 一.代码部分 1:WXML:  <view class="father_box"> ...
微信小程序————简易计算器
1.计算器小程序点击页面数字按键可以计算简单的加减乘除数据运算. 2.大概结构页面显示大概逻辑是当点第一次击数字键的时候要有个变量来存储这个点击的数,然后再来个记录点击运算符的变量,等要算的数全 ...
微信小程序---简易教程
1:安装好微信开发者工具之后新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目 ...
微信小程序简易音频播放器（wx.getBackgroundAudioManager()）
开发工具:微信开发者工具源代码(百度网盘:)链接: 提取码:ldb9 注意:如果点击播放没反应,或者爆红,则需要更换js中的视频地址第一步.首先要在app.json里设置: "requi ...

微信小程序简易朴朴超市

微信小程序简易朴朴超市相关推荐

最新文章

热门文章