今天给大家带来教程开发快捷精选导航页面设计与制作教程，制作好以后效果如下图：
一、wxml页面代码如下：
<view class="city">
<view class="title">
<text>城市</text>
<text class="english">CITY</text>
</view>
<view class="content">
<view class="nm">三亚</view>
<view class="nm">丽江</view>
<view class="nm">海口</view>
<view class="nm">厦门</view>
<view class="nm">大理</view>
<view class="nm">香格里拉</view>
<view class="nm">巴厘岛</view>
<view class="nm">济州岛</view>
</view>
</view>
<view class="carrer">
<view class="title">
<text>职业</text>
<text class="english">CARRER</text>
</view>
<view class="content">
<view class="nm">摄影师</view>
<view class="nm">造型师</view>
</view>
</view>
<view class="style">
<view class="title">
<text>风格</text>
<text class="english">STYLE</text>
</view>
<view class="content">
<view class="nm">简约时尚</view>
<view class="nm">森系小清新</view>
<view class="nm">唯美大气</view>
</view>
</view>
|
二、wxss样式文件代码如下：
.city{
width: 96%;
height: 400rpx;
margin: 0 auto;
}
.carrer{
width: 96%;
height: 200rpx;
margin: 0 auto;
}
.style{
width: 96%;
margin: 0 auto;
}
text{
font-size: 34rpx;
color:#B0B0B0;
font-weight: bold;
width: 100%;
}
.title{
position: relative;
padding-bottom: 10rpx;
margin-top: 20rpx;
}
.title::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #999999;
transform: scaleY(.5);
}
.english{
font-size: 32rpx;
color: #DCDCDC;
}
.english::before{
content: '|';
width: 2px;
}
.content{
width: 96%;
margin: 0 auto;
color:#8B8386;
}
.nm{
display: block;
float: left;
padding: 6rpx 30rpx 6rpx 30rpx;
text-decoration: none;
font-size: 40rpx;
border:1px solid #DEDEDE;
border-radius: 30rpx;
margin-top: 30rpx;
margin-left: 50rpx;
}
|
三、js文件代码如下：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
userInfo: {},
source:'github.com/sukura7'
},
onLoad:function(){
// 小程序中要获取用户的身份
console.log('onload');
app.getUserInfo((data) => {
this.setData({
userInfo:data
})
})
},
onReady:function(){
// console.log('ready');
wx.setNavigationBarTitle({
title:'精选导航'
})
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude
var longitude = res.longitude
this.setData({
latitude,
longitude
})
}
})
}
})
|
.jpg)
.jpg)
