微信小程序尝试--写一个简单的tabbar和首页
这是尝试写一个微信小程序微信小程序不支持大图，这里上传图片来使用先放上简单的首页效果app.json文件内容index.wxmlindex.wxssindex.js
这是尝试写一个微信小程序
推荐多看官方文档
微信小程序不支持大图，这里上传图片来使用
先放上简单的首页效果
推荐使用iPhone6调试，然后单位使用rpx, 1px=2rpx，这是微信小程序的单位会自适应不同的屏幕：
app.json文件内容
{
"pages": [
"pages/index/index",
"pages/publish/publish",
"pages/detail/detail",
"pages/share/share",
"pages/login/login",
"pages/info/info",
"pages/select_city/select_city",
"pages/mypage/mypage",
"pages/info_collect/info_collect",
"pages/new_built/new_built"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3a4861",
"navigationBarTitleText": "Hermt",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "/icons/home.png",
"selectedIconPath": "/icons/home-active.png"
},
{
"pagePath": "pages/publish/publish",
"text": "新建",
"iconPath": "/icons/add.png",
"selectedIconPath": "/icons/add_active.png"
},
{
"pagePath": "pages/mypage/mypage",
"text": "我的",
"iconPath": "/icons/profile.png",
"selectedIconPath": "/icons/profile-active.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
index.wxml
<view class='head_view'>
<navigator url='/pages/select_city/select_city' id='select_addr'>杭州
<image src="/icons/down.png" class='down_png'></image></navigator>
<input type='text' class='search_bar'></input>
<image src='/icons/search.png' class='search_icon'></image>
</view>
<view class='head_image_area'></view>
<view class='page_sort_area'>
<view class='sorted_item'>类型
<image src='/icons/down_sorted.png' class="down_arrow" ></image>
</view>
<view class='sorted_item' bindtap='click_show_mark'>评分
<image class='down_arrow' src='/icons/down_sorted.png'></image>
</view>
<view class='sorted_item' bindtap='click_show_distance'>距离
<image class='down_arrow' src='/icons/down_sorted.png'></image>
</view>
<view class='sorted_item' bindtap='click_show_cost'>消费
<image class='down_arrow' src='/icons/down_sorted.png'></image>
</view>
</view>
<scroll-view scroll-y="true" class='banner_view'>
<view class='banner_item' >
<navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img1}}'></image>
<view class='text_view'>
<text class='title_item'>{{item1_title}}
</text>
<text class='detail_item location_area'>{{item1_text1}}
</text>
<text class='detail_item'>{{item1_text2}}
</text>
<text class='detail_item'>{{item1_text3}}
</text>
<text class='detail_item detail_item_last'>{{item1_text4}}
</text>
<text class='distance_text'>{{item1_distance}}
</text>
</view>
</navigator>
</view>
<view class='banner_item' >
<navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img2}}'></image>
<view class='text_view'>
<text class='title_item'>{{item2_title}}
</text>
<text class='detail_item location_area'>{{item2_text1}}
</text>
<text class='detail_item'>{{item2_text2}}
</text>
<text class='detail_item'>{{item2_text3}}
</text>
<text class='detail_item detail_item_last'>{{item2_text4}}
</text>
<text class='distance_text'>{{item2_distance}}
</text>
</view>
</navigator>
</view>
<view class='banner_item' >
<navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img3}}'></image>
<view class='text_view'>
<text class='title_item'>{{item3_title}}
</text>
<text class='detail_item location_area'>{{item3_text1}}
</text>
<text class='detail_item'>{{item3_text2}}
</text>
<text class='detail_item'>{{item3_text3}}
</text>
<text class='detail_item detail_item_last'>{{item3_text4}}
</text>
<text class='distance_text'>{{item3_distance}}
</text>
</view>
</navigator>
</view>
<view class='banner_item' >
<navigator url='/pages/detail/detail'><image class='banner_item_img' src='{{item_img4}}'></image>
<view class='text_view'>
<text class='title_item'>{{item4_title}}
</text>
<text class='detail_item location_area'>{{item4_text1}}
</text>
<text class='detail_item'>{{item4_text2}}
</text>
<text class='detail_item'>{{item4_text3}}
</text>
<text class='detail_item detail_item_last'>{{item4_text4}}
</text>
<text class='distance_text'>{{item4_distance}}
</text>
</view>
</navigator>
</view>
</scroll-view>
index.wxss
.head_view{
height: 90rpx
;
width: 750rpx
;
background-color: rgba(153, 153, 153, 0.356
);
box-sizing: border-box
;
}
#select_addr{
width: 150rpx
;
height: 70rpx
;
display: inline-flex
;
flex-direction: column
;
justify-content: center
;
align-items: center
;
line-height: 70rpx
;
}
.down_png{
width: 45rpx
;
height: 45rpx
;
position: absolute
;
left: 105rpx
;
top: 5.5rpx
;
padding: 18rpx 18rpx 0 0
;
color: #999
;
cursor: pointer
;
}
.search_bar{
position: relative
;
width: 560rpx
;
background-color: white
;
display: inline-flex
;
margin-top: 20rpx
;
border-radius: 28rpx
;
line-height: 80rpx
;
}
.search_icon{
width: 36rpx
;
height: 36rpx
;
position: absolute
;
left: 162rpx
;
top: 11rpx
;
padding: 18rpx 18rpx 0 0
;
color: #999
;
cursor: pointer
;
}
.head_image_area{
width: 100%
;
height: 289.8rpx
;
background-image: url('https://img-blog.csdnimg.cn/20190523165826416.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhdWwwOTI2,size_16,color_FFFFFF,t_0');
background-size: 100% 100%
;
}
.dropDownArea{
width: 750rpx
;
height: 80rpx
;
display: flex
;
}
.dropDownArea view{
width: 187rpx
;
height: 80rpx
;
font-size: 28rpx
;
font-family: PingFangSC-Regular
;
font-weight: 400
;
color: rgba(102,102,102,1
);
line-height: 80rpx
;
text-align: center
;
}
.dropDownArea view image{
width: 18rpx
;
height: 15rpx
;
margin-left: 10rpx
;
margin-top: 30rpx
;
}
.sort
.page_sort_area{
width: 90%
;
height: 90.6rpx
;
margin: 0 auto
;
background:white
;
}
.sorted_item{
display: inline-block
;
width: 25%
;
font-size: 27.17rpx
;
line-height: 81.5rpx
;
text-align: center
;
}
.down_arrow{
position: relative
;
left:0
;
top: 9.06rpx
;
width: 36.23rpx
;
height: 36.23rpx
;
}
.banner_view{
width: 750rpx
;
height: 900rpx
;
}
.banner_item{
width: 100%
;
height: 225rpx
;
border: 0.18rpx #999 solid
;
overflow: hidden
;
}
.banner_item_img{
line-height: 199.3rpx
;
margin-top: 9.06rpx
;
width: 30%
;
height: 200rpx
;
}
.text_view{
line-height: 200rpx
;
margin-top: 9.05rpx
;
margin-right: 9.05rpx
;
width: 68%
;
height: 199.3rpx
;
float: right
}
.title_item{
font-weight: bold
;
font-size: 23rpx
;
margin-top: 0
;
margin-left: 9.05rpx
;
line-height: 19.9rpx
;
display: block
}
.detail_item{
font-size: 23rpx
;
margin-top: 14.5rpx
;
margin-left: 9.06rpx
;
line-height: 22rpx
;
display: block
}
.detail_item_last{
line-height: 30rpx
;
}
.location_area{
width: 50%
;
}
.distance_text{
font-size: 20rpx
;
width: 20%
;
line-height: 21.74rpx
;
float: right
;
margin-top: -159.42rpx
;
}
index.js
const app
= getApp()
Page({
data
: {
item_img1
:"https://img-blog.csdnimg.cn/20190523161915369.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhdWwwOTI2,size_16,color_FFFFFF,t_0",
item1_title
:'网易蜗牛图书馆',
item1_text1
:'杭州高新区',
item1_text2
:'整体评分：10分',
item1_text3
:'￥ 0/人',
item1_text4
:'简介：读书馆附近的公园、社区、学校和企业将实现网易蜗牛读书APP不限时免费畅读...',
item1_distance
:'9.8km',
item_img2
: "https://img-blog.csdnimg.cn/20190523161859482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhdWwwOTI2,size_16,color_FFFFFF,t_0",
item2_title
: '王小波书店',
item2_text1
: '滨江区钱塘江畔',
item2_text2
: '整体评分：9.0分',
item2_text3
: '￥ 0/人',
item2_text4
: '简介：书店面积并不大，大概100平方米左右，老板专门在左侧书架设立了一栏...',
item2_distance
: '9.5km',
item_img3
: "https://img-blog.csdnimg.cn/20190523161846201.png",
item3_title
: '悦览树',
item3_text1
: '青年路31号',
item3_text2
: '整体评分：8.0分',
item3_text3
: '￥ 30/人',
item3_text4
: '简介：悦览树提供更加优质的服务和24小时营业的特点，开放式的消费和更加人性...',
item3_distance
: '23.4km',
item_img4
: "https://img-blog.csdnimg.cn/20190523161956841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhdWwwOTI2,size_16,color_FFFFFF,t_0",
item4_title
: '钟书阁',
item4_text1
: '滨江区江南大道228号',
item4_text2
: '整体评分：9.0分',
item4_text3
: '￥ 0/人',
item4_text4
: '简介：透明的建筑风格，令人眼花缭乱的书，还有各种有特色的你想象不到的设计...',
item4_distance
: '9.8km',
},
onLoad
: function (options
) {
},
onReady
: function () {
},
onShow
: function () {
},
onHide
: function () {
},
onUnload
: function () {
}
})
