当前位置: 代码迷 >> 综合 >> 从零开始的小程序 循环渲染+微信判断+下拉加载跟多+获取地理位置+轮播图+tabbar
  详细解决方案

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

热度:34   发布时间:2023-12-25 02:26:05.0
    <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选中时的图片

  相关解决方案