前端页面效果如下:
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
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',
})
}
},
})