小程序单页面demo-PC乐园案例

根据效果图实现静态页面效果

初步体会基于微信的页面开发模式

第一步：

在pages文件夹下，新建目录leyuan,并在其下面新建Page，生成如下目录

第二步：在leyuan/index.wxml中

结构：

<!-- PC乐园案例 -->
<!-- 轮播图 -->
<swiper indicator-dots="true"><swiper-item><image src="/static/uploads/item_1.png"/></swiper-item><swiper-item><image src="/static/uploads/item_2.png"/></swiper-item><swiper-item><image src="/static/uploads/item_3.png"/></swiper-item>
</swiper><!-- 乐园活动 -->
<view class="title">乐园活动</view>
<image class="detail" src="/static/uploads/detail_1.png"/>
<view class="desc"><view class="name">疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</view><view class="info">200人已报名 本周六开始</view><view class="free">免费</view>
</view><view class="title">乐园活动</view>
<image class="detail" src="/static/uploads/detail_1.png"/>
<view class="desc"><view class="name">疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</view><view class="info">200人已报名 本周六开始</view><view class="free">免费</view>
</view><view class="title">乐园活动</view>
<image class="detail" src="/static/uploads/detail_1.png"/>
<view class="desc"><view class="name">疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</view><view class="info">200人已报名 本周六开始</view><view class="free">免费</view>
</view>

在leyuan/index.wxss中

样式：

/* pages/leyuan/index.wxss */
swiper {height: 320rpx;
}
image {width: 750rpx;height: 320rpx;
}.title {padding: 20rpx 30rpx;font-family: FZLTCHJW--GB1-0;font-size: 14px;color: #3C3C3C;//字符间距letter-spacing: 0.01px;
}
.detail {height: 320rpx;
}
.desc .name {padding: 20rpx 130rpx 20rpx 30rpx;font-family: FZLTHJW--GB1-0;font-size: 15px;color: #3C3C3C;letter-spacing: 0.21px;line-height: 21px;
}
.desc {position: relative;
}
.desc .info {padding: 30rpx 60rpx;font-family: FZLTHJW--GB1-0;font-size: 11px;color: #B4B4B4;letter-spacing: 0.05px;
}
.desc .free {position: absolute;top: 20rpx;right: 30rpx;font-family: FZLTHJW--GB1-0;font-size: 15px;color: #FE6249;letter-spacing: 0.07px;
}

效果图如下：

小程序单页面demo-PC乐园案例相关推荐

微信小程序前端页面Demo系列之仿塞尔达攻略助手首页
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
动手搭建第一个小程序音视频Demo
腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序,但是再好的源码和文档也有学习成本,为了尽快的能调试起来,我们还提供了一个免费的一键部署服务:您只需轻点几下鼠标,就可以在自己的账号下获得 ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
微信小程序单指拖拽和双指缩放旋转
前言小程序单指拖拽和双指操作是一个比较常用的功能,效果如下图实现这三个功能,主要用三个触摸事件touchstart.touchmove.touchend <view style=" ...
小程序今日头条demo
运行环境开发工具:微信web开发者工具版本: 微信web开发者工具 v0.12.130400 适配: 适用于微信web开发者工具中所有模拟器的机型 demo介绍 1.本demo分为2个模块首页 ...
扫码普通二维码跳转微信小程序指定页面（体验服和开发服跳转链接不能动态传参）
好久不见,时隔多年我又来记录问题来了,记录这次问题的主要原因是减少你我去搜索资源的时间,下面开始讲讲我越到的问题.(下面说的是针对小程序体验版或者开发版哈,正式环境不存在这个问题) 需求:pc端扫码登 ...
【天天外链】支持H5链接跳转到企业小程序任意页面！
除了传统的固定外链模式,天天外链现在支持H5/链接跳转到企业小程序任意页面. 提前准备在天天外链官网小程序/后台注册[天天外链],使用密钥版添加您的小程序(输入配置参数即可) 创建一条推广链接(简单 ...

小程序单页面demo-PC乐园案例

小程序单页面demo-PC乐园案例

结构：

样式：

效果图如下：

小程序单页面demo-PC乐园案例相关推荐

最新文章

热门文章