打开编辑器,双击打开index.wxml(这里你把wxml直接理解成html就好),先撸一发,把里面代码统统的删除直接扔一个轮播图进去,
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">{{userInfo.name}}</view>
<view class="flex-item bc_red">{{userInfo.leo}}</view>
<view class="flex-item bc_blue">{{userInfo.lau}}</view>
<view class="flex-item bc_orange">{{userInfo.last}}</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
看不懂?不墨迹,直接上源码地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=201715
别被它那些自定义的标签忽悠了,你把view当成div用就完事儿。
大家看到了三件事:
1.{{userInfo.leo}} 这破玩意是啥?
简单数据绑定,用过angular就知道{{里面放的是要展示的数据}},数据从哪里来?直接打开index.js
上代码,清空加上我写的代码就ok,一件事是展示leo,第二件事是配置轮播图
var app = getApp()
Page({
data: {
userInfo:{
name:"leo",
leo:'屌',
lau:'爆',
last:'了'
},
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true,
autoplay: true,
circular:true,
interval: 2000,
duration: 1000,
}
})
2.样式写哪?打开index.wxss,一句话以前你怎么写index.css这个里面照旧。
.slide-image{width:100%;}
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
最后一件事,不墨迹上图:
首页.png头部的字儿怎么改,我说过了结构,直接看文档,https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=201715
上代码:在全局配置里面改的。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "京东购物-奶茶版",
"navigationBarTextStyle":"black"
}
}
老规矩,上个图收尾:
过程.png
明天把这个小程序搞成商城细化下,就一切鸟了。
网友评论