微信小程序开发——详情页面

注意点:
1.在开始时先用一个大的view把整个页面包裹起来
2.每个view下的子view要缩进,方便区分
3.一定要用英文定义类,不记得的单词要查!!!
a.在做弹性布局的时候要现在全局的view里边wxss定义一个    display:flex;
b.wxss颜色:微信小程序开发——详情页面微信小程序开发——详情页面
css中border旋转:

 

 微信小程序开发——详情页面

 

 

轮播图代码
//.wxml
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
      class="swiper">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
//.wxss
Page({
  data: {
    // motto: ‘Hello World‘,
    // userInfo: {},
    // hasUserInfo: false,
    // canIUse: wx.canIUse(‘button.open-type.getUserInfo‘),
    // canIUseGetUserProfile: false,
    // canIUseOpenData: wx.canIUse(‘open-data.type.userAvatarUrl‘) && wx.canIUse(‘open-data.type.userNickName‘) // 如需尝试获取用户信息可改为false
    indicatorDots:true,
    autoplay:true,
    interval:3000,
    duration:1000,
    imgUrls:[
      ‘https://file.youboy.com/d/154/62/29/2/445442.jpg‘,
      ‘https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181017%2F7d96a02ca5804ad988038d4c4337406d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620562939&t=dcc4be59756cdc56de5ca50b2a2c5d45‘,
      ‘https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180525%2F14056da38cd04372b98c61a0c50d79e1.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620562939&t=dc4ce99167df1466526be623307665ba‘,
    ],}})
 

微信小程序开发——详情页面

上一篇:微信小程序授权登录


下一篇:微信小程序将data里面需要传的参数改为json值