从零开始的小程序 循环渲染+微信判断+下拉加载跟多+获取地理位置+轮播图+tabbar

    <view class="item" wx:for="{{item}}">   
      <view class="img">
          <image src="{{'http://jujiewang.oss-cn-hangzhou.aliyuncs.com/'+item.clommn_img}}" ></image>  //图片渲染方式
      </view>
      <text>{{item.name}}</text>     //默认为item 就算上面的循环用的是wx:for="{{shop}}"
    </view>

//循环渲染

<text wx:if="{{item.names== ''}}">暂无数据</text>
<text wx:else >{{item.names[0]}},{{item.names[1]}}</text>

//微信判断。都看的懂的

  onReachBottom: function () {
 
    console.log("已到底部");
//---------------------------上拉加载更多----------------------
  },

//上拉加载更多

      success: function (res) {

        var moment_list = that.data.shop;
        for (var i = 0; i < res.data.respond.length; i++) {
          moment_list.push(res.data.respond[i]);
        }
        // 设置数据
        that.setData({
          shop: that.data.shop
        })
}

// 加载等多时要加载跟多的数据 用这种方法放进去

    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var lat = res.latitude     //纬度
        var lng = res.longitude   //精度
        that.data.lat=lat;
        that.data.lng = lng;
        addressBaidu(lat,lng);
      }
    })

//获取地理位置的方法 。都看的懂得 

<swiper indicator-dots="{{indicatorDots}}"
           autoplay="true" circular="false" interval="2000" >
            //是否自动轮播  是否无缝  时间
      <block wx:for="{{imgUrls}}">
        <swiper-item>
           <navigator hover-class="navigator-hover">
            <image src="{{item.url}}" class="slide-image" />
           </navigator> 
        </swiper-item>
      </block>
</swiper>

//轮播图 赋值就行了

{
  "pages": [
    "pages/index/index",
    "pages/near/near",
    "pages/mine/mine",
    "pages/order/order"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "桔街网",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#a9b7b7",        
    "selectedColor": "#ee741a", 
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath":"img/threeStar.png",  
        "iconPath": "img/threeStar.png",    
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "img/threeStar.png",
        "iconPath": "img/threeStar.png",
        "pagePath": "pages/near/near",
        "text": "附近"
      },
      {
        "selectedIconPath": "img/threeStar.png",
        "iconPath": "img/threeStar.png",
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "selectedIconPath": "img/threeStar.png",
        "iconPath": "img/threeStar.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

// 底部导航栏  别忘记page里要注册 其他的直接用tabbar里的就行了。。。color和selectcolor控制文字颜色的

// iconPath用来控制图片  selectIconPath选中时的图片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值