├── pages
    ├── hot
    │   ├── hot.json
    │   ├── hot.js
    │   ├── hot.wxss
    │   └── hot.wxml
    ├── logs
    │   ├── logs.json
    │   ├── logs.wxss
    │   ├── logs.wxml
    │   └── logs.js
    ├── component
    │   ├── boy.png
    │   ├── girl.png
    │   └── header.wxml
    ├── index
    │   ├── index.json
    │   ├── index.wxss
    │   ├── index.wxml
    │   └── index.js
    ├── login
    │   ├── login.json
    │   ├── login.wxml
    │   ├── login.wxss
    │   └── login.js
    ├── common.js
    └── main
    │   ├── main.wxml
    │   ├── main.wxss
    │   └── main.js
├── README.md
├── utils
    └── util.js
├── app.json
├── app.js
└── app.wxss


/pages/hot/hot.json:
--------------------------------------------------------------------------------
1 | {
2 |  "navigationBarTitleText":"足球圈-首页"
3 | }


--------------------------------------------------------------------------------
/pages/logs/logs.json:
--------------------------------------------------------------------------------
1 | {
2 |     "navigationBarTitleText": "查看启动日志"
3 | }


--------------------------------------------------------------------------------
/pages/component/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yang6701218/wechat-little-project/HEAD/pages/component/boy.png


--------------------------------------------------------------------------------
/pages/component/girl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yang6701218/wechat-little-project/HEAD/pages/component/girl.png


--------------------------------------------------------------------------------
/pages/component/header.wxml:
--------------------------------------------------------------------------------
1 | <!--可以定义公共的模板，并且在那个页面使用的，就可以使用那个页面的data里面的数据-->
2 | <view class="header">我是{{header}}</view>
3 | 


--------------------------------------------------------------------------------
/pages/logs/logs.wxss:
--------------------------------------------------------------------------------
1 | .log-list {
2 |   display: flex;
3 |   flex-direction: column;
4 |   padding: 40rpx;
5 | }
6 | .log-item {
7 |   margin: 10rpx;
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # wechat-little-project
2 | this is demo for  wechat litter project , just for begginner , if you  familiar with vuejs ，then will be sample for you
3 | 


--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | 
2 | {
3 |     "navigationBarBackgroundColor": "pink",
4 |     "navigationBarTitleText": "首页",
5 |     "navigationBarTextStyle":"white"
6 | }
7 | 
8 | 


--------------------------------------------------------------------------------
/pages/logs/logs.wxml:
--------------------------------------------------------------------------------
1 | <!--logs.wxml-->
2 | <view class="container log-list">
3 |   <block wx:for-items="{{logs}}" wx:for-item="log">
4 |     <text class="log-item">{{index + 1}}. {{log}}</text>
5 |   </block>
6 | </view>
7 | 


--------------------------------------------------------------------------------
/pages/login/login.json:
--------------------------------------------------------------------------------
1 | {
2 |     "navigationBarBackgroundColor":"#0dc441",
3 |     "navigationBarTextStyle":"white",
4 |     "navigationBarTitleText":"主球圈--登陆",
5 |     "backgroundColor":"#cccccc",
6 |     "backgroundTextStyle":"light"
7 | }


--------------------------------------------------------------------------------
/pages/common.js:
--------------------------------------------------------------------------------
1 | //定义公共的方法的地方，使用 module.exports 暴露出去
2 | module.exports = {
3 |    phone: function(phone){
4 |         if(!/^(13[0-9]|15[0|1|2|3|6|7|8|9]|18[0-9]|177)\d{8}$/.test(phone)){
5 |             return false;
6 |         }
7 |         return true;
8 |     }
9 | }


--------------------------------------------------------------------------------
/pages/logs/logs.js:
--------------------------------------------------------------------------------
 1 | var util = require('../../utils/util.js')
 2 | Page({
 3 |   data: {
 4 |     logs: []
 5 |   },
 6 |   onLoad: function () {
 7 |     this.setData({
 8 |       logs: (wx.getStorageSync('logs') || []).map(function (log) {
 9 |         return util.formatTime(new Date(log))
10 |       })
11 |     })
12 |   }
13 | })
14 | 


--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
 1 | /**index.wxss**/
 2 | .userinfo {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   align-items: center;
 6 | }
 7 | 
 8 | .userinfo-avatar {
 9 |   width: 128rpx;
10 |   height: 128rpx;
11 |   margin: 20rpx;
12 |   border-radius: 50%;
13 |   
14 | }
15 | 
16 | .userinfo-nickname {
17 |   color: red;
18 | }
19 | 
20 | .usermotto {
21 |   margin-top: 200px;
22 | }


--------------------------------------------------------------------------------
/pages/main/main.wxml:
--------------------------------------------------------------------------------
 1 | <!--index.wxml-->
 2 | <view class="container">
 3 |   <view  bindtap="onButtonTap" class="userinfo">
 4 |     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 5 |     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 6 |   </view>
 7 |   <view>
 8 |     <text class="user-motto">{{motto}}</text>
 9 |   </view>
10 | </view>
11 | 


--------------------------------------------------------------------------------
/pages/login/login.wxml:
--------------------------------------------------------------------------------
1 | <view class="login_box">
2 |         <input type="text" id="telephone" placeholder="手机号" value="{{phone}}" bindinput="bindPhone"/>
3 |         <input type="password" id="pwd" placeholder="密码" value="{{pwd}}" bindinput="bindPwd"/>
4 |         <view class="go_reg">没有账号？点击立即<a href="register.html" class="reg_btn">注册</a></view>
5 |         <button type="primary" bindtap="goLogin" class="login-btn"> 提 交 </button>
6 | </view>
7 | 


--------------------------------------------------------------------------------
/pages/main/main.wxss:
--------------------------------------------------------------------------------
 1 | /**index.wxss**/
 2 | .container {
 3 |   height: 100%;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   align-items: center;
 7 |   justify-content: space-between;
 8 |   padding: 200rpx 0;
 9 |   box-sizing: border-box;
10 | }
11 | .userinfo {
12 |   display: flex;
13 |   flex-direction: column;
14 |   align-items: center;
15 | }
16 | .userinfo-avatar {
17 |   width: 128rpx;
18 |   height: 128rpx;
19 |   margin: 20rpx;
20 |   border-radius: 50%;
21 | }
22 | .userinfo-nickname {
23 |   color: #aaa;
24 | }
25 | 


--------------------------------------------------------------------------------
/utils/util.js:
--------------------------------------------------------------------------------
 1 | function formatTime(date) {
 2 |   var year = date.getFullYear()
 3 |   var month = date.getMonth() + 1
 4 |   var day = date.getDate()
 5 | 
 6 |   var hour = date.getHours()
 7 |   var minute = date.getMinutes()
 8 |   var second = date.getSeconds();
 9 | 
10 | 
11 |   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
12 | }
13 | 
14 | function formatNumber(n) {
15 |   n = n.toString()
16 |   return n[1] ? n : '0' + n
17 | }
18 | 
19 | module.exports = {
20 |   formatTime: formatTime
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/main/main.js:
--------------------------------------------------------------------------------
 1 | var app = getApp()
 2 | Page({
 3 |   data: {
 4 |     motto: 'Hello WeApp',
 5 |     userInfo: {}
 6 |   },
 7 |   onButtonTap: function() {
 8 |     wx.navigateTo({
 9 |       url: '../logs/logs'
10 |     })
11 |   },
12 |   onLoad: function () {
13 |     console.log('onLoad')
14 |     var that = this
15 |   	//登录
16 |     wx.login({
17 |       success: function () {
18 |         wx.getUserInfo({
19 |           success: function (res) {
20 |             that.setData({userInfo: res.userInfo})
21 |             that.update()
22 |           }
23 |         })
24 |       },
25 |       fail: function (res) {
26 |         console.log(res)
27 |       }
28 |     });
29 |   }
30 | })
31 | 


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <!--index.wxml-->
 2 | <template name="staffName">
 3 |  <view>
 4 |     <text> {{index}}: {{msg}} </text>
 5 |     Time: {{time}}
 6 |   </view>
 7 | </template>
 8 | 
 9 | <include src="../component/header.wxml"/>
10 | <view class="container" animation="{{animationData}}">
11 |   <text>{{motto}}</text>  
12 |   <view  bindtap="bindViewTap" class="userinfo" data-user-id="CD1603">
13 |     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
14 |     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
15 |   </view>
16 |   <text wx:for="{{array}}">{{index}}-----{{item}}</text>
17 |   <template is="staffName" data="{{...item}}"></template>
18 | </view>
19 | 
20 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages":[
 3 |     "pages/login/login",
 4 |     "pages/hot/hot",
 5 |     "pages/index/index",
 6 |     "pages/logs/logs"
 7 |   ],
 8 |   "window":{
 9 |     "backgroundTextStyle":"light",
10 |     "navigationBarBackgroundColor": "#0dc441",
11 |     "navigationBarTitleText": "WeChat01",
12 |     "navigationBarTextStyle":"white"
13 |   },
14 |   "debug": false,
15 |   "tabBar": {
16 |     "color":"blue",
17 |     "selectedColor":"red",
18 |     "borderStyle":"white",
19 |     "list": [{
20 |       "pagePath": "pages/index/index",
21 |       "text": "首页",
22 |       "iconPath":"pages/component/girl.png",
23 |       "selectedIconPath":"pages/component/boy.png"
24 |     },{
25 |       "pagePath": "pages/hot/hot",
26 |       "text": "HOT-首页",
27 |       "iconPath":"pages/component/girl.png",
28 |       "selectedIconPath":"pages/component/boy.png"
29 |     }]
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/pages/login/login.wxss:
--------------------------------------------------------------------------------
 1 | 
 2 |       .login_box{
 3 |         padding: 15px;
 4 |        }
 5 |        .login_box input{    	
 6 |        	 display: inline-block;
 7 |        	 width: 100%;
 8 |          height: 36px;
 9 |        	 font-size: 20px;
10 |        	 line-height: .7rem;
11 |        	 border-bottom: 1px solid #d4d4d4
12 |        }
13 |       .login_box #pwd{    	
14 |       	margin-top: .55rem;
15 |        }
16 |        .go_reg {
17 |           font-size:12px;
18 |           margin:24px 0px;
19 |           color: #a8a8a8;
20 |        }
21 |        .reg_btn {
22 |           color: #4bd16f;
23 |           text-decoration: underline;
24 |        }
25 |        .login-btn{
26 |        	display: inline-block;
27 |        	min-width: 100%;
28 |        	height: 44px;
29 |        	font-size: 16px;
30 |        	background: #0dc441;
31 |        	line-height: 44px;
32 |        	text-align: center;
33 |        	color: #fff;
34 |        	border-radius: .24rem;
35 |        }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | //app.js
 2 | App({
 3 |   //app启动调用的钩子函数，不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。
 4 |   onLaunch: function () {
 5 |     //调用API从本地缓存中获取数据
 6 |     var logs = wx.getStorageSync('logs') || []
 7 |     logs.unshift(Date.now())
 8 |     wx.setStorageSync('logs', logs)
 9 |   },
10 |   //当页面要加载出来的钩子函数 ，可以在这里使用 getCurrentPage 哦！
11 |   onShow:function(){
12 |     console.log("页面要显示啦")
13 |   },
14 |   getUserInfo:function(cb){
15 |     var that = this;
16 |     if(this.globalData.userInfo){
17 |       typeof cb == "function" && cb(this.globalData.userInfo)
18 |     }else{
19 |       //调用登录接口
20 |       wx.login({
21 |         success: function () {
22 |           wx.getUserInfo({
23 |             success: function (res) {
24 |               that.globalData.userInfo = res.userInfo;
25 |               typeof cb == "function" && cb(that.globalData.userInfo)
26 |             }
27 |           })
28 |         }
29 |       });
30 |     }
31 |   },
32 |   //全局的自定义配置数据，在其他地方可以使用app.js的实例获取
33 |   globalData:{
34 |     userInfo:null,
35 |     url:'http://10.7.156.200:8080'
36 |   }
37 | })
38 | 


--------------------------------------------------------------------------------
/pages/hot/hot.js:
--------------------------------------------------------------------------------
 1 | Page({
 2 |   data:{
 3 |     indicatorDots:true,
 4 |     durTime:500,
 5 |     pageActive:0,
 6 |     scrollViewHeight:400,
 7 |     mr:'marginLeft0',
 8 |     liveList:[],
 9 |     womanList:[],
10 |     leftList:[]
11 |   },
12 |   onLoad:function(options){
13 |     // 页面初始化 options为页面跳转所带来的参数
14 |   },
15 |   onReady:function(){
16 |       this.getList();
17 |   },
18 |   scroll:function(event){
19 |     console.log(event.detail);
20 |   },
21 |   swiperChange:function(event){
22 |     var current =  event.detail.current;
23 |     this.pageActiveChange(event.detail.current);
24 |   },
25 |   swiperItem:function(event){
26 |      this.pageActiveChange(event.target.dataset.index);
27 |   },
28 |   pageActiveChange:function(index){
29 |      this.setData({
30 |        pageActive:index
31 |      })
32 |   },
33 |   getList:function(index,list){
34 |      var index =  index | 0;
35 |      var that = this;
36 |      wx.request({
37 |          url:'http://10.7.156.200:8080/api/listLive',
38 |          data:{index:index},
39 |          complete:function(res){
40 |            
41 |          },
42 |          success:function(res){
43 |              that.setData({
44 |                  liveList:res.data
45 |              });
46 |          }
47 |      });
48 |   }
49 | })


--------------------------------------------------------------------------------
/pages/login/login.js:
--------------------------------------------------------------------------------
 1 | var commom = require('../common.js');
 2 | var app = getApp()
 3 | Page({
 4 |   data:{
 5 |     // text:"这是一个页面"
 6 | 
 7 |           phone:'18508336634',
 8 |           pwd:'111',
 9 |           toastHidden:true,
10 |           errorMsg:''
11 |   },
12 |   onLoad:function(options){
13 |     // 页面初始化 options为页面跳转所带来的参数
14 |   },
15 |   toastChange:function(){
16 |     console.log("我要消失啦");
17 |     this.setData({
18 |         toastHidden:true,
19 |         errorMsg:""
20 |     })
21 |   },
22 |   goLogin:function(){
23 |     if(!commom.phone(this.data.phone)){
24 |        wx.showToast({
25 |          title:'你的号码对么？',
26 |          icon:'loading',
27 |          duration:1500
28 |        });
29 |        return
30 |     }
31 |      wx.request({ //发请求
32 |          url : app.globalData.url+'/api/login',
33 |          data:{phone:this.data.phone,pwd:this.data.pwd},
34 |          complete:function(){
35 |              console.log(11)
36 |          },
37 |          success:function(){
38 |             wx.redirectTo({url:'/pages/index/index?id=11121'})
39 |          }
40 |      });
41 |      //console.log(this.data.phone);
42 |      
43 |   },
44 |   //赋值电话
45 |   bindPhone:function(e){
46 |     this.setData({
47 |       phone:e.detail.value
48 |     })
49 |   },
50 |   bindPwd:function(e){
51 |     this.setData({
52 |       pwd:e.detail.value
53 |     })
54 |   }
55 | })


--------------------------------------------------------------------------------
/pages/hot/hot.wxss:
--------------------------------------------------------------------------------
 1 | .header_top{
 2 |     width: 100%;
 3 |     height: 88rpx;
 4 |     background: #0dc441;
 5 |     overflow: hidden;
 6 |     text-align: center
 7 | }
 8 | .header_list{
 9 |     display: inline-block;
10 |     margin: 11rpx auto 0rpx;
11 |     border-radius:50rpx ;
12 |     background:rgba(100,255,255,0.5);
13 |     overflow: hidden;
14 | }
15 | text{
16 |     display: inline-block;
17 |     font-style: normal;
18 |     padding: 2rpx 32rpx;
19 |     text-align: center;
20 |     line-height: 56rpx;
21 |     color: #fff;
22 |     font-size: 24rpx;
23 | }
24 | .hot_icon{
25 |     background:rgba(100,217,133,0.5);
26 | }
27 | .focus_icon{
28 |     background:rgba(61,208,103,0.5);
29 | }
30 | .nav{
31 |     overflow: hidden;
32 |     display: flex;
33 |     background: #fff;
34 | }
35 | .nav_item{
36 |     flex: 1;
37 |     height: 60rpx;
38 |     font-size: 24rpx;
39 |     text-align: center;
40 |     line-height: 65rpx;
41 |     color: mediumblue;
42 | }
43 | .nav_item.active{
44 |     color: #0dc441;
45 |     border-bottom: 3px solid #0dc441
46 | }
47 | .scrollView{
48 |     display: flex;
49 |     flex-direction:row;
50 | }
51 | .scroll-view-item{
52 |     float: left;
53 |     width: 9.7rem;
54 |     border: 1px solid #aaa;
55 |     height: auto;
56 |     margin-right: 0.2rem;
57 | }
58 | .scroll-view-img{
59 |    height:10rem ; 
60 | }
61 | 
62 | .scroll-view-item image{
63 |    width: 100%;
64 |    height:9.7rem ;
65 | }
66 | .scroll-view-text{
67 |     color:darkblue;
68 |     text-align: center
69 | }
70 | .marginLeft0{
71 |   margin-right: 0;
72 | }


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
 1 | /*reset*/
 2 | @charset "utf-8";
 3 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
 4 | h1,h2,h3,h4,h5,h6{ font-weight: normal;}
 5 | li { list-style: none; }
 6 | i{font-style: normal;}
 7 | img { border: none; }
 8 | input,
 9 | select,
10 | textarea { outline: none; border: none; background: none; border-radius: 0;
11 |   -webkit-border-radius: 0;
12 |   -webkit-appearance: none;
13 |   background-image: -webkit-linear-gradient(transparent, transparent);
14 |   background-image: linear-gradient(transparent, transparent);
15 |   font-family:"Helvetica", "Arial";
16 | }
17 | textarea { resize: none; }
18 | html { -webkit-text-size-adjust:none;overflow-x:hidden;}
19 | article,aside,details,figcaption,figure,footer, header, hgroup, menu, nav,section { display: block; }
20 | img { display: block; max-width: 100%; height:auto;}
21 | .video embed, .video object,.video iframe { width: 100%; height: auto; }
22 | a { border:0; text-decoration: none; outline: none;}
23 | a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
24 | em{ font-style: normal;}
25 | 
26 | .clearfix:after,
27 | .clearfix:before { content: ""; display: table; }
28 | .clearfix:after { clear: both; }
29 | .clearfix { zoom: 1; }
30 | page {min-width:300px; background-color: #f8f8f8; color:#030000;overflow-x:hidden;}
31 | page{font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial,
32 | "Microsoft YaHei", FreeSans, Arimo, "Droid Sans",
33 | "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3",
34 | FontAwesome, sans-serif;}
35 | 
36 | /**app.wxss**/
37 | .container {
38 |   height: 100%;
39 |   display: flex;
40 |   flex-direction: column;
41 |   align-items: center;
42 |   justify-content: space-between;
43 |   padding: 100rpx 0;
44 |   box-sizing: border-box;
45 | }
46 | 
47 | .header{
48 |   background: orangered;
49 |   width: 20rem;
50 | }


--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
 1 | //index.js  
 2 | //page页面一共有onLoad	Function	生命周期函数--监听页面加载
 3 | //onReady	Function	生命周期函数--监听页面渲染完成
 4 | //onShow	Function	生命周期函数--监听页面显示
 5 | //onHide	Function	生命周期函数--监听页面隐藏
 6 | //onUnload	Function	生命周期函数--监听页面卸载
 7 | 
 8 | //获取应用实例,获取app.js
 9 | var Countunt = 19; //自定义的数据只能在当前页面使用，并且不能在页面中{{}}拿到
10 | var commom = require('../common.js');
11 | var app = getApp()
12 | //所有的 页面相关 数据事件都要放到
13 | Page({
14 |   //配置当前页面使用的数据，跟vue的data类似,可以在页面中 使用 {{}} 获取
15 |   data:{
16 |     motto: 'Hello World',
17 |     userInfo: {},
18 |     array: [1, 2, 3, 4, 5],
19 |     item: {
20 |       index: 0,
21 |       msg: 'this template',
22 |       time: '2016-09-23'
23 |     },
24 |     header:'首页',
25 |     animationData:null
26 |   },
27 |   onReady:function(){
28 |   
29 |   },
30 |   onShow:function(){
31 |     var animation = wx.createAnimation({ //页面之间切换是没有动画设置的
32 |       duration: 1000,
33 |       timingFunction: 'ease',
34 |     })
35 | 
36 |     this.animation = animation
37 |     //设置初始状态
38 |     animation.scale(2, 2).step();
39 | 
40 |     this.setData({
41 |       animationData:animation.export()
42 |     })
43 | 
44 |     setTimeout(function() {
45 |       //设置结束状态，这样才有动画
46 |       animation.scale(1).step()
47 |       this.setData({
48 |         animationData:animation.export()
49 |       })
50 |     }.bind(this), 1000)
51 |   },
52 |   //事件处理函数 处理页面通过bind+事件名绑定的  bind与catch的区别是后者会阻止冒泡
53 |   bindViewTap: function(event) {
54 |     //wx.navigateTo({
55 |      // url: '../logs/logs'
56 |    // })
57 |    //跟vue一样 data里面的属性都是相应的，在组件内通过this调用
58 |    console.log(event.currentTarget.dataset);
59 |    //this.setData({
60 |     //  motto:"小学生放假了了！"
61 |    //})
62 |   
63 |   },
64 |   onHide:function(){
65 |      console.log("不要离开我！")
66 |   },
67 |   //onload:页面加载的时候执行的钩子函数
68 |   onLoad: function (options) {
69 |     //console.log(options.id)
70 |     var that = this
71 |   	//调用应用实例的方法获取全局数据
72 |     app.getUserInfo(function(userInfo){
73 |       //setData函数用于将数据从逻辑层发送到视图层，也就是让数据的变化映射到Domom 变化，要调用它
74 |       that.setData({
75 |         userInfo:userInfo
76 |       })
77 |       that.update()
78 |     })
79 |   },
80 |   onReady:function(){//页面渲染完成的钩子
81 | 
82 |   }
83 | })
84 | 


--------------------------------------------------------------------------------
/pages/hot/hot.wxml:
--------------------------------------------------------------------------------
 1 | <view class="header_top">
 2 | 	<view class="header_list">
 3 | 		<text class="hot_icon">热点</text><text class="focus_icon">关注</text>
 4 | 	</view>
 5 | </view>
 6 | <view class="nav" bindtap="swiperItem">
 7 |    <view class="nav_item {{pageActive==0?'active':''}}" data-index="0">足球现场</view>
 8 |    <view class="nav_item {{pageActive==1?'active':''}}" data-index="1">足球美女</view>
 9 |    <view class="nav_item {{pageActive==2?'active':''}}" data-index="2">足球生活</view>
10 | </view>
11 | <swiper duration="{{durTime}}" bindchange="swiperChange" current="{{pageActive}}" style="height:410px">
12 |    <!--生活-->
13 |     <swiper-item>
14 |        <scroll-view class="scrollView" scroll-y="true" style="height: {{scrollViewHeight}}px;" bindscroll="scroll" scroll-into-view="blue" scroll-top="10">
15 |            <view wx:for="{{liveList.data}}" class="scroll-view-item {{index%2==0?'':mr}}">
16 |                <view class="scroll-view-img">
17 |                   <image src="{{item.imgSrc}}" mode="aspectFill"></image>
18 |                </view>
19 |                <view class="scroll-view-text">{{item.descripition}}</view>
20 |             </view>
21 |        </scroll-view>
22 |     </swiper-item>
23 |      <!--美女-->
24 |     <swiper-item>
25 |        <scroll-view class="scrollView" scroll-y="true" style="height: 50px;" bindscroll="scroll" scroll-into-view="blue" scroll-top="10">
26 |             <view id="green" class="scroll-view-item bc_green">哈哈</view>
27 |             <view id="red"  class="scroll-view-item bc_red">哈哈</view>
28 |             <view id="yellow" class="scroll-view-item bc_yellow">哈哈</view>
29 |             <view id="blue" class="scroll-view-item bc_blue">哈哈blue</view>
30 |         </scroll-view>
31 |     </swiper-item>
32 |     <!--现场-->
33 |     <swiper-item>
34 |        <scroll-view class="scrollView" scroll-y="true" style="height: 50px;" bindscroll="scroll" scroll-into-view="blue" scroll-top="10">
35 |             <view id="green" class="scroll-view-item bc_green">哈哈</view>
36 |             <view id="red"  class="scroll-view-item bc_red">哈哈</view>
37 |             <view id="yellow" class="scroll-view-item bc_yellow">哈哈</view>
38 |             <view id="blue" class="scroll-view-item bc_blue">哈哈blue</view>
39 |         </scroll-view>
40 |     </swiper-item>
41 | </swiper>
42 | 
43 | <template>
44 | </template>        
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------