微信小程序-阿休

阿休哥

已于 2023-10-22 12:28:26 修改

阅读量74

点赞数 1

文章标签：前端 java javascript

于 2023-10-22 08:49:30 首次发布

本文链接：https://blog.csdn.net/qq_42794905/article/details/133969281

版权

<van-grid  column-num="3" border="{{ false }}" >
  <van-grid-item use-slot wx:for="{{ mvlist }}" >
    <image
      style="width: 100%; height: 100px;"
      src="{{item.data[0].poster}}"
    />
  </van-grid-item>
</van-grid>

{
  "usingComponents": {
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index"
  }
  ,
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTitleText": "更多电影",
  "navigationBarTextStyle": "white"
}

// pages/more/more.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mvlist:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that=this
    wx.request({
      url: 'https://api.wmdb.tv/api/v1/top?type=Imdb&skip=0&limit=250&lang=Cn',
      success(res){
        if(res){
          console.log(res.data),
          that.setData({
            mvlist:res.data
          })
        }
       else{
        console.log("没有数据")
       }
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

index

https://airportal.cn/977075/Uw8BcP1rsV

Node.js

navigator | 微信开放文档

iconfont-阿里巴巴矢量图标库

Vant 2 - Mobile UI Components built on Vue

wechat_devtools_1.06.2308310_win32_x64.exe

<searchinput class="search"></searchinput>
<swiper class="swiper" autoplay indicator-dots indicator-color="#fff" indicator-active-color="dee">
  <swiper-item wx:for="{{swiper}}">
    <navigator url="/pages/detail/detail?goods_id={{item.goods_id}}">
      <image src="{{item.image_src}}" mode="widthFix"></image>
    </navigator>
  </swiper-item>
</swiper>
<view class="cates">
  <navigator wx:for="{{cates}}" url="/pages/logs/logs">
    <image src="{{item.image_src}}" mode="widthFix"></image>
  </navigator>
</view>

<view class="floor">
  <view wx:for="{{floor}}" class="floor_item" wx:for-item="item1">
    <view class="floor_title">
      <image src="{{item1.floor_title.image_src}}" mode="widthFix"></image>
    </view>
    <navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" url="/pages/goodslist/goodslist">
      <image src="{{item2.image_src}}" mode="{{index2==0?'widthFix':'scaleToFill'}}"></image>
    </navigator>
  </view>
</view>

css

.page{
  padding-top: 110rpx;
}
.search{
  width: 100%;
  position: fixed;
  left: 0;
  top:0;
  z-index: 999;
  /* 图层位置 */
}
.swiper{
  height: 320rpx;
  margin-top: 100rpx;
}
.swiper swiper-item image{
  width: 100%;
}
.cates{
  display: flex;
  justify-content: space-between;
}
.cates navigator{
  width: 25%;
  display: inline-block;
}
.cates navigator image{
  width: 80%;
  display: block;
  margin: 0 auto;
}
.floor{
  margin-top: 20rpx;
}
.floor_item navigator{
  width: 33.3%;
  float: left;
  border: 5rpx #fff solid;
  box-sizing: border-box;
}
.floor_item navigator image{
  width: 100%;
  height: 100%;
}
.floor_item navigator:nth-last-child(-n+4){
  height: 208rpx;
}

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    swiper:[],
    cates:[],
    floor:[]
  },
  
  onLoad() {
    let that=this
    wx.request({
      url: 'http://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success(res){
        that.setData({
          swiper:res.data.message
        })
      }
    }),
    wx.request({
      url: 'http://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
      success(res){
        that.setData({
          cates:res.data.message
        })
      }
    }),
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
      success(res){
        that.setData({
          floor:res.data.message
        })
      }
    })
  }
})

goodlist

<tabs array="{{tabarr}}" bindmyevent="onMyEvent"></tabs>
<view class="goods_list">
  <navigator wx:for="{{goods}}">
    <view class="left">
      <image src="{{item.goods_small_logo?item.goods_small_logo:'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg'}}" mode="widthFix"></image>
    </view>
    <view class="right">
      <view class="goods_name">{{item.goods_name}}</view>
      <view class="goods_price">¥{{item.goods_price}}</view>
    </view>
  </navigator>
</view>

css

.goods_list{
  padding: 20rpx;
}
.goods_list navigator{
display: flex;
width: 100%;
}
.left{
  flex: 1;
}
.left image{
  width: 70%;
  margin: 0 auto;
  display: block;
}
.right{
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.goods_name{
  font-size: 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
}
.goods_price{
  color: red;
}


Page({
/**
 * 综合：http://api-hmugo-web.itheima.net/api/public/v1/goods/search?pagesize=20&pagenum=1&cid=5
 *价格： http://api-hmugo-web.itheima.net/api/public/v1/goods/search?pagesize=20&pagenum=2&cid=5
 *价格：/http://api-hmugo-web.itheima.net/api/public/v1/goods/search?pagesize=20&pagenum=3&cid=5
 **/
  data: {
    tabarr:["综合","销售","价格"],
    sindex:0,
    goods:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getgoods(0)
  },
  onMyEvent(e){
    console.log(e)
    let sindex=e.detail
    this.setData({
      sindex
    })
    this.getgoods(sindex)
  },
  getgoods(num){
    let that=this
    wx.request({
      url: 'http://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      data:{
        pagesize:20,
        pagenum:num+1,
      },
      success(res){
        console.log(res)
        that.setData({goods:res.data.message.goods})
        
      }
    })
  } 
})

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/detail/detail",
    "pages/search/search",
    "pages/cates/cates",
    "pages/goodslist/goodslist",
    "pages/user/user",
    "pages/login/login",
    "pages/cart/cart"
  ],
  "tabBar": {
    "color": "#7d6566",
    "selectedColor": "#5592FA",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/首页.png",
        "selectedIconPath": "image/首页 (1).png"
      },
      {
        "pagePath": "pages/cates/cates",
        "text": "分类",
        "iconPath": "image/分类.png",
        "selectedIconPath": "image/分类 (1).png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "image/购物车.png",
        "selectedIconPath": "image/购物车 (1).png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "image/我的.png",
        "selectedIconPath": "image/我的 (1).png"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTitleText": "24赵新林",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

分类：

<searchinput></searchinput>
<view class="cates">
  <scroll-view class="leftmenu" scroll-y>
    <view wx:for="{{leftmenu}}" bind:tap="bindtap" class="leftitem {{sindex==index?'active':''}}" data-index="{{index}}">{{item}}</view>
  </scroll-view>

  <scroll-view class="rightcontent" scroll-y scroll-top="{{scrolltop}}">
    <view wx:for="{{rightcontent}}" wx:for-item="item1" wx:for-index="index1">
      <view class="title">
        <view>/ {{item1.cat_name}} /</view>
      </view>
      <navigator wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" class="nav_item">
        <image src="{{item2.cat_icon}}" mode="widthFix"></image>
        <view>{{item2.cat_name}}</view>
      </navigator>
    </view>
  </scroll-view>
</view>

.cates{
  display: flex;
  height: 100vh;
}
.leftmenu{
  flex: 2;
}
.leftitem{
  font-size: 36rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.active{
  color: red;
  border-left: 5rpx solid red;
}
.rightcontent{
  flex: 5;
  background-color: #feffff;
}
.title view{
  text-align: center;
}
.nav_item{
  width: 33.3%;
  display: inline-block;
}
.nav_item image{
  width: 70%;
  margin: 0 auto;
  display: block;
}
.nav_item view{
  text-align: center;
  font-size: 25rpx;
}

// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    leftmenu:[],
    rightcontent:[],
    sindex:0,
    scrolltop:0,
  },
  cates:[],
  onLoad:function(options) {
    let that=this
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      success(res){
        that.cates=res.data.message
        console.log(res)
        that.setData({
          leftmenu:that.cates.map(v=>v.cat_name),
          rightcontent :that.cates[0].children
        })
      }
    })
  },
  bindtap(e){
    let index=e.currentTarget.dataset.index
    this.setData({
      sindex:index,
      rightcontent:this.cates[index].children,
      scrolltop:0
    })
  }
})

tabs组件

<!--components/tabs/tabs.wxml-->
<view class="tabs">
  <view wx:for="{{array}}" bindtap="bindtap" data-index="{{index}}" class="tabs_item {{sindex==index?'active':''}}">{{item}}</view>
</view>

/* components/tabs/tabs.wxss */
/* pages/goodslist/goodslist.wxss */
.tabs{
  display: flex;
  height: 80rpx;
}
.tabs_item{
  line-height: 80rpx;
  flex:1;
  text-align: center;
}
.active{
  color: red;
  border-bottom: 8rpx solid red;
}

// componets/tabs/tabs.js
Component({

  properties:{
    array:{
      type:Array,
      value:[]
    }
  },
  
  data: {
    sindex:0
  },
  methods:{
    bindtap(e){
      let index=e.currentTarget.dataset.index
      this.setData({
        sindex:index
      })
      this.triggerEvent('myevent',index)
    }
  }
})