微信小程序还原手机淘宝首页

有一起研究微信开发的可以滴滴我哦

首页准备就做到这里,其他的一些东西留在后面的页面做,后面会把首页分类的弹出层完善了.

以下是代码源代码:

<view class="Top">
<view class="Top_viewT">
<view class="Top_viewTitem">
<image src="../../images/i/saoyisao.png"></image>
<text>扫一扫</text>
</view>
<input placeholder='搜索商品'></input>
<view class="Top_viewTitem">
<image src="../../images/i/hongbao.png"></image>
<text>领红包</text>
</view>
<view class="Top_viewTitem">
<image src="../../images/i/huiyuanma.png"></image>
<text>会员码</text>
</view>
</view>
<view class="Top_viewD">
<scroll-view scroll-x class="scroll-x">
<view wx:for='{{sort}}' wx:for-item="item" class="view-parent">
<view class="view-item">{{item}}</view>
</view>
</scroll-view>
<view class="sortBtn">
<text>≡</text>
<text>分类</text>
</view>
</view>
</view>
<view class="Box">
<!-- 轮播图 -->
<swiper style="height:240rpx;width:{{BoxWidth}}px" indicator-dots="true" indicator-color="gray" indicator-active-color="#ff8500">
<block wx:for="{{PImages}}">
<swiper-item>
<image style="width:{{BoxWidth}}px" data-index='{{index}}' src="{{item}}" mode='widthFix'></image>
</swiper-item>
</block>
</swiper>
<!-- 轮播图 --><!-- 菜单 -->
<view class="Menu_Box">
<view class="Menu">
<image src="../../images/i/tm.png"></image>
<text>天猫新品</text>
</view>
<view class="Menu">
<image src="../../images/i/ju.png"></image>
<text>今日爆款</text>
</view>
<view class="Menu">
<image src="../../images/i/gj.png"></image>
<text>天猫国际</text>
</view>
<view class="Menu">
<image src="../../images/i/elm.png"></image>
<text>饿了么</text>
</view>
<view class="Menu">
<image src="../../images/i/tmcs.png"></image>
<text>天猫超市</text>
</view>
<view class="Menu">
<image src="../../images/i/sj.png"></image>
<text>充值中心</text>
</view>
<view class="Menu">
<image src="../../images/i/jb.png"></image>
<text>领淘金币</text>
</view>
<view class="Menu">
<image src="../../images/i/pm.png"></image>
<text>拍卖</text>
</view>
<view class="Menu">
<image src="../../images/i/kb.png"></image>
<text>口碑生活</text>
</view>
<view class="Menu">
<image src="../../images/i/vip.png"></image>
<text>88VIP</text>
</view>
</view>
<!-- 菜单 -->
<!-- 内容 -->
<view class="BoxBG">
<view class="Path">
<view class="Left">
<view class="Item" wx:for="{{Paths}}">
<view class="Item_top">
<view>{{item.title}}</view>
</view>
<view class="Item_down">
<view style="color:{{item.color}}">{{item.name}}</view>
<image src="../../images/g/good.png"></image>
</view>
</view>
</view>
<view class="Right">
<view class="Item" wx:for="{{Paths}}">
<view class="Item_top">
<view>{{item.title}}</view>
</view>
<view class="Item_down">
<view style="color:{{item.color}}">{{item.name}}</view>
<image src="../../images/g/good.png"></image>
</view>
</view>
</view>
</view>
<view class="Path News">
<view>淘宝头条</view>
<swiper class="swiper_container" vertical="true" autoplay="true" interval="2000">
<swiper-item wx:for="{{msgList}}">
<view class="swiper_item">{{item}}</view>
</swiper-item>
</swiper>
</view>
</view>
<!-- 内容 -->
</view>page {
background-color: #e2e2e2;
}.Box {
display: flex;
flex-direction: column;
font-size: 30rpx;
position: absolute;
overflow: hidden;
top: 130rpx;
}.Top {
z-index: 2;
position: fixed;
top: 0rpx;
width: 96%;
padding: 10rpx 2%;
background: linear-gradient(to right, #ff8500, #ff5000);
height: 120rpx;
display: flex;
flex-direction: column;
color: #fff;
font-size: 16rpx;
}.Top_viewT {
display: flex;
flex-direction: row;
height: 70rpx;
}.Top_viewTitem {
display: flex;
flex-direction: column;
align-items: center;
width: 10%;
}.Top_viewT image {
height: 40rpx;
width: 40rpx;
}input {
background: #fff;
color: black;
width: 70%;
height: 55rpx;
text-align: center;
border-radius: 30rpx;
margin-left: 2%;
margin-right: 2%;
font-size: 25rpx;
}.Top_viewD {
display: flex;
flex-direction: row;
height: 50rpx;
line-height: 50rpx;
}.scroll-x {
width: 85%;
display: flex;
white-space: nowrap;
}.sortBtn {
display: flex;
flex-direction: row;
font-size: 24rpx;
background-color: #ff8500;
padding: 0 20rpx;
height: 40rpx;
line-height: 40rpx;
margin-top: 5rpx;
border-radius: 30rpx;
width: 20%;
}.view-parent {
display: inline-block;
position: relative;
}.view-item {
width: 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}.swiper image {
width: 100%;
height: auto;
}.Menu_Box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}.Menu {
width: 18%;
height: 100rpx;
padding: 10rpx 1%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 25rpx;
color: #868686;
}.Menu image {
width: 60rpx;
height: 60rpx;
}.BoxBG {
width: 96%;
height: auto;
margin: 30rpx 2%;
background-color: #fff;
border-radius: 40rpx;
display: flex;
flex-direction: column;
}.Path {
display: flex;
flex-direction: row;
}.Left {
border-right: 0.5rpx #e0dfdf solid;
border-top-left-radius: 40rpx;
width: 40%;
border-bottom: 0.5rpx #e0dfdf solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx 5%;
}.Right {
border-bottom: 0.5rpx #e0dfdf solid;
width: 40%;
border-top-right-radius: 40rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx 5%;
}.Item {
display: flex;
flex-direction: column;
width: 45%;
height: 200rpx;
margin-bottom: 10rpx;
}.Item_top {
text-align: left;
font-size: 30rpx;
font-weight: 600;
}.Item_down {
display: flex;
flex-direction: column;
position: initial;
border-radius: 20rpx;
margin-top: 5rpx;
height: 150rpx;
width: 100%;
text-align: center;
font-size: 25rpx;
font-weight: 500;
box-shadow: 0 2px 10px rgb(119, 119, 119);
}.Item_down image {
width: 100%;
border-radius: 20rpx;
}.News {
padding: 10rpx 5%;
font-weight: 700;
line-height: 70rpx;
}.swiper_container {
height: 55rpx;
width: 70%;
margin-left: 20rpx;
}.swiper_item {
font-size: 25rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 2px;
color: red;
}Page({
data: {
sort: ["首页", "男装", "车品", "鞋靴", "生鲜", "食品", "母婴", "女装", "箱包", "运动", "百货", "手机", "内衣", "饰品", "美妆", "数码"],
PImages: [
"http://img.alicdn.com/imgextra/i3/134/O1CN01XdWHpI1CrPcnFTIRg_!!134-0-luban.jpg",
"http://gw.alicdn.com/imgextra/i3/189/O1CN01xJ58FN1DGbPPcRkGZ_!!189-0-lubanu.jpg",
"http://gw.alicdn.com/imgextra/i3/99/O1CN01v0LHn31CbNlKwd0MK_!!99-0-lubanu.jpg",
"https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg",
"http://img.alicdn.com/imgextra/i1/116/O1CN01GdqivQ1CjAUoAzBa8_!!116-0-luban.jpg"
],
Paths: [{
title: "聚划算",
name: "限量秒杀",
color: "orange"
},
{
title: "淘抢购",
name: "限时半价",
color: "pink"
},
{
title: "天天特卖",
name: "9.9包邮",
color: "red"
},
{
title: "每日好店",
name: "挖深藏的店",
color: "gold"
},
{
title: "一起拼团",
name: "划算买",
color: "green"
},
{
title: "抽个奖",
name: "来抽奖",
color: "blue"
}
],
msgList: [
"华为Mate30价格爆光",
"IphoneXR2 9.2日发布",
"首款6400W像素手机,8.8日发布"
]
},
//事件处理函数
onLoad: function() {
var _this = this
wx.getSystemInfo({
success: function(res) {
_this.setData({
BoxWidth: res.windowWidth,
BoxHeight: res.windowHeight,
})
}
})
},
getUserInfo: function(e) {}
})

微信小程序还原手机淘宝首页相关推荐

微信小程序仿手机淘宝新增地址自动识别地址，姓名，手机号
代码比较简单直接上代码吧 //自动识别事件 autoDiscern: function () { //省 var province = ["广东", "北京", ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程 ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
实现微信小程序和手机app远程控制51单片机控制L298N电机驱动器控制马达（ESP8266 AT89S52 http请求转串口通信系统 mqtt ）
首先你有这样的8266 这种8266自身带2个按键和烧录芯片方便调试,综合性价比较高. 还有就是你需要有一个51单片机或者其他芯片都行.有了这2个芯片我们开始吧! 1.先看一段视频效果演示,再来介绍实 ...
微信小程序判断手机机型信息及dpr
微信小程序判断手机机型信息及dpr=2.3 出现这个原因是因为手机dpr不同,导致在显示二维码时出现位置偏移.首先能想到的就是获取设备信息,根据不同机型而解决问题. 1.wxml 开控制位置间距var ...
【小程序模板】功能模块+仿vivo手机商城微信小程序+品牌手机APP购物网页模板
[小程序模板]功能模块+仿vivo手机商城微信小程序+品牌手机APP购物网页模板源码简介与安装说明: 仿vivo手机商城微信小程序品牌手机app购物网页模板源码下载. 小程序源码下载地址:(82条 ...
微信小程序选择手机相册里的图片并上传到页面
微信小程序获取手机相册里的图片并传到页面上 index.wxml代码 // 相册中的照片 <button bindtap='handleChooseAlbum'>选中图片</butt ...

微信小程序还原手机淘宝首页

微信小程序还原手机淘宝首页相关推荐

最新文章

热门文章