微信小程序：完成“微信”中“发现”“服务”的页面
列表布局小程序：完成“微信”中“发现”的页面
下为详细代码：
discover.wxml
<!--pages/discover/discover.wxml-->
<view class="grid-item" wx:for="{{array}}" wx:key="no">
<view class="grid-list">
<image src="{{item.inco}}" mode="center"/>
{{item.nam}}
<image class="right" src="../images/right.png" mode="heightFix"/></view>
</view>
discover.wxss
/* pages/discover/discover.wxss */
page{
background-color: #ededed;
}
.grid-list {
display: flex;
height: 60rpx;
width: 100%;
flex-wrap: wrap;
background-color: #ffffff;
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
margin-bottom: 15rpx;
}
.grid-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #ededed;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image {
width: 60rpx;
height: 100%;
}
.grid-item text {
font-size: 24rpx;
margin-top: 10rpx;
}
.right{
margin-right: 20rpx;
margin-left: auto;
}
discover.js
// pages/discover/discover.js
Page({
/**
* 页面的初始数据
*/
data: {
array: [{
no: "1",
nam: "朋友圈",
inco:'../images/1.png'
}, {
no: "2",
nam: "视频",
inco:'../images/2.png'
}
, {
no: "3",
nam: "扫一扫",
inco:'../images/3.png'
}, {
no: "4",
nam: "摇一摇",
inco:'../images/4.png'
}, {
no: "55",
nam: "看一看",
inco:'../images/1.png'
}, {
no: "66",
nam: "搜一搜",
inco:'../images/1.png'
}, {
no: "77",
nam: "直播和附近",
inco:'../images/1.png'
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
九宫格布局小程序：完成“微信”中“我”的“服务”页面。
serve.wxml
<!--pages/serve/serve.wxml-->
<scroll-view scroll-y="true">
<view class="cont">
<view class="head">
<image src="../images/3head.png" mode="center"/>
</view>
<view class="first">
<view class="first1">
<text>金融理财</text>
</view>
<view class="first2">
<view>
<image src="../images/finance1.png" mode="center"/>
<text>信用卡还款</text></view>
<view>
<image src="../images/finance2.png" mode="center"/>
<text>理财通</text></view>
<view>
<image src="../images/finance3.png" mode="center"/>
<text>保险服务</text> </view>
</view>
</view>
<view class='servicePanel'>
<view class='serviceTitle'>生活服务</view>
<view class='serviceBlocks'>
<view class='box2' wx:for='{{array2}}' wx:key='array2_{{index}}'>
<image src='../images/{{index+5}}.png'></image>
<text>{{item.text}}</text>
</view>
</view>
</view>
<view class='servicePanel'>
<view class='serviceTitle'>交通出行</view>
<view class='serviceBlocks'>
<view class='box2' wx:for='{{array3}}' wx:key='array2_{{index}}'>
<image src='../images/{{index+11}}.png'></image>
<text>{{item.text}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
serve.wxss文章来源：https://www.toymoban.com/news/detail-599034.html
/* pages/serve/serve.wxss */
page{
background-color: #ededed;
}
.cont{
display: flex;
flex-direction: column;
background-color: #ededed;
}
.head{
height: 240rpx;
width: 100%;
display: flex;
background-color: #2aad67;
align-items: center;
justify-content: center;
}
.first{
display: flex;
flex-direction: column;
height: 220rpx;
width: 100%;
background-color: white;
margin-top: 10rpx;
}
.first1{
height: 15%;
width: 100%;
}
.first1 text{
color: #a19f9f;
margin-top: 10rpx;
margin-left: 20rpx;
}
.first2{
height: 85%;
width: 100%;
display: flex;
flex-direction: row;
}
.first2 view{
width: 200rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.first2 image{
display: flex;
height: 60rpx;
width: 60rpx;
}
.first2 text{
display: flex;
font-size: 20rpx;
font-weight:bold;
margin-top: 15rpx;
}
.servicePanel{
display: flex;
flex-direction: column;
height: 440rpx;
width: 100%;
background-color: white;
margin-top: 10rpx;
}
.serviceTitle{
height: 7.5%;
width: 100%;
color: #a19f9f;
margin-top: 10rpx;
margin-left: 20rpx;
}
.serviceBlocks{
display: flex;
flex-direction: row; /*水平布局*/
flex-wrap: wrap; /*允许换行*/
}
.box2{
display: flex; /*flex布局模型*/
flex-direction: column; /*垂直布局*/
align-items: center; /*水平方向居中*/
justify-content: center; /*垂直方向居中*/
width: 25%; /*宽度约占屏幕的1/3*/
height: 180rpx;
}
/* 方格内图标 */
.box2 image{
width: 80rpx;
height: 80rpx;
}
/* 方格内文字 */
.box2 text{
font-size: 20rpx; /*字号为30rpx*/
}
serve.js文章来源地址https://www.toymoban.com/news/detail-599034.html
// pages/serve/serve.js
Page({
myData:'123',
onLoad:function(options){
console.log(this.myData)
},
/**
* 页面的初始数据
*/
data: {
array2:[
{
text:'手机充值'
},
{
text:'生活缴费'
},
{
text:'Q币充值'
},
{
text:'城市服务'
},
{
text:'腾讯公益'
},
{
text:'医疗健康'
}
],
array3:[
{
text:'手机充值'
},
{
text:'生活缴费'
},
{
text:'Q币充值'
},
{
text:'城市服务'
},
{
text:'腾讯公益'
},
{
text:'医疗健康'
}
]
},
/**
* 生命周期函数--监听页面加载
*/
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
到了这里，关于微信小程序：完成“微信”中“发现”“服务”的页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
