前端页面效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190413184638123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNjAxMjk5,size_16,color_FFFFFF,t_70)
WXML代码:
<!-- 铜陵力凡公司 -->
<view class='head'>
{{mess}}
</view>
<!-- 图片模块 -->
<view>
<image src="/images/logo.jpg" class='img'></image >
</view>
<!-- 循环遍历模块 -->
<view class='center'>
<view class="part" wx:for-items="{{list}}" bindtap="dispath" wx:for-index="index" data-text="{{item}}">
{{item}}
</view>
</view>
<view>
</view>
<view wx:if="{{flag?true:false}}" class="version">
{{versioninfo}}
</view>
js代码
Page({
/**
* 页面的初始数据
*/
data: {
mess:'铜陵力凡有限公司',
list: ["我发布的项目", "友情咨询", "支持服务类型","更多"],
flag:false,
versioninfo:"小程序开发者-田江南",
},
//点击不同的模块,根据模块里面的内容跳转到不同的页面
dispath:function(e){
//e.currentTarget.dataset.text获取点击的模块的值
if ("友情咨询"==e.currentTarget.dataset.text){
wx.navigateTo({
url: './page',
})
}
if ("我发布的项目" == e.currentTarget.dataset.text) {
wx.navigateTo({
url: '../publish/index',
})
}
if ("支持服务类型" == e.currentTarget.dataset.text) {
wx.navigateTo({
url: './service',
})
}
if ("更多" == e.currentTarget.dataset.text) {
wx.navigateTo({
url: './more',
})
}
},
})
效果如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190413184744243.gif)