1|weekly movie


介绍

1|weekly movie
1|weekly movie

创建项目+目录文件结构
实现一个单页面的小程序

1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
或者把样式写在wxss中
1|weekly movie
1|weekly movie
1|weekly movie

页面配置初探

1|weekly movie
要做出来的效果图:
1|weekly movie
1|weekly movie

1|weekly movie
怎么动态的改变导航栏的文字?

text,view,image组件

1|weekly movie
1|weekly movie

实现UI设计图中的样式及布局效果

传统实现:
1|weekly movie
1|weekly movie

1|weekly movie
1|weekly movie
但是传统方式布局目标的实现属性赋值非常分散;严重依赖页面结构与内容实际大小
如果此时又多个text标签呢,那个margin-bottom的值就不是那么合适了,要重新写

1|weekly movie
弹性盒子:
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie

1|weekly movie
弹性盒子布局相关的wxss属性赋值比较统一
弹性盒子布局方式灵活

没有去计算间隔的大小,实现的是人工布局,比较灵活

让元素大小适配不同宽度屏幕

1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie

.about-banner{
width:375rpx;
height: 375rpx;
border-radius: 50%;
}

1|weekly movie

新增每周推荐weekly页并快速调试

1|weekly movie
1|weekly movie
1|weekly movie

1|weekly movie

1|weekly movie

<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推荐</text>
<image src="/images/jf.jpg"></image>
<text>教父</text>
<text>点评:最精彩的剧本,最真实的黑帮电影</text>
</view>

1|weekly movie

使用navigator组件–从about页跳到weekly页

1|weekly movie
1|weekly movie

1|weekly movie

open-type默认值navigate,可返回的
redirect 不可以返回的
注意:text标签只能识别纯文本,其他都无效

/* pages/about/about.wxss */
/* .container{
background-color: #eee;
height: 100vh;
text-align: center;
}
text{
display: block;
}
text,image{
margin-bottom: 40px;
} */
.container{
background-color: #eee;
height: 100vh;

display: flex;
flex-direction: column;

justify-content: space-around;
align-items: center;

}
.about-banner{
width:375rpx;
height: 375rpx;
border-radius: 50%;
}
.nav-hover{
color:red;
}
.nav-default{
color:green;
}

<!--pages/about/about.wxml-->
<view class="container">
<image class="about-banner"src="/images/simbasong.jpg"></image>
<text style="font-weight:bold;font-size:60rpx;">电影周周看</text>
<view>
<text>我</text>
<navigator style='display: inline;' url='/pages/weekly/weekly' open-type="navigate" class="nav-dafault" hover-class="nav-hover">每周推荐</navigator>
<text>一部好片</text>
</view>

<text>我的wechat是:weixin.com/qxy</text>
<text>this is boiling island</text>
<text>i am EDA</text>
<text>Welcome our country</text>
</view>

但是结果navigator默认的颜色为绿色显示了,但是点击后成没有出现红色
1|weekly movie

1|weekly movie

因为样式选择器的一样的时候,就越在后面优先级越高
所以上面的hover-default优先级高,所以点击后还是会显示绿色而不是红色
下面把nav-hover放在最后面,最后点击“每周推荐”字体会变成红色而且跳入weekly页面
1|weekly movie

配置tabbar–对若干一级页面的入口链接

1|weekly movie
1|weekly movie

1|weekly movie
app.json:

{
"pages":[
"pages/about/about",
"pages/weekly/weekly"

],

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#66CDAA",
"borderStyle": "black",
"backgroundColor": "#F0F8FF",

"list": [
{
"pagePath": "pages/weekly/weekly",
"text": "每周推荐",
"iconPath": "images/tabbar/weekly.png",
"selectedIconPath": "images/tabbar/weekly-selected.png"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/tabbar/about.png",
"selectedIconPath": "images/tabbar/about-selected.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}

1|weekly movie
但是原来的about 页面的元素点击无效
解决方法:
改下navigator的open-type为switchTab
1|weekly movie

1|weekly movie

配置全局导航栏样式

1|weekly movie

数据绑定–

1|weekly movie
1|weekly movie
也就是每一次需要手动修改WXML的值
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie
1|weekly movie

1|weekly movie
1|weekly movie

1|weekly movie

1|weekly movie
在AppData可以看见:
1|weekly movie

<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推荐</text>
<image src="{{thisWeekMovie.imagePath}}"></image>
<text>{{thisWeekMovie.name}}</text>
<text>{{thisWeekMovie.comment}}</text>
<text>数目为:{{count}}</text>
<text>分数为:{{score}}</text>
<text>{{(score>60)?"及格":"不及格"}}</text>
<text>{{score+count}}</text>
</view>

// pages/weekly/weekly.js
Page({

/**
* 页面的初始数据
*/
data: {
thisWeekMovie:{
name:"教父",
comment:"最精彩的剧本,最真实的黑帮电影。",
imagePath:"/images/icon/jf.jpg"
},
count:24,
score:36
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

weekly.json

{
"usingComponents": {},
"navigationBarTitleText": "每周推荐"
}

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

1|weekly movie

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 1|weekly movie
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏