微信小程序（四）会员专区

最新推荐文章于 2024-10-14 18:26:03 发布

Zaltana

最新推荐文章于 2024-10-14 18:26:03 发布

阅读量4.8k

点赞数 6

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/zhoulina815/article/details/123978950

版权

本文介绍了微信小程序中如何创建并实现会员专区的功能，包括图片轮播、中间展示区域的颜色尺寸配置、数量显示以及底部固定加入购物车按钮的布局。通过分析`goos_detail.wxml`、`goos_detail.wxss`和`goos_detail.js`文件，揭示了小程序前端界面设计和交互逻辑的关键点。

摘要由CSDN通过智能技术生成

图片轮播部分

<view class="haibao">
    <swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}"
        indicator-color="#f2f2f2" indicator-active-color="#C81623" style="height:350px;">
        <block wx:for="{
  {imgUrls}}" wx:key="imgUrls">
            <swiper-item>
                <!-- {
  {item}} <image :src="{
  {item}}" class="silde-image"  mode="widthFix" /> -->
                <image mode="widthFix" src="{
  {item}}" mode="widthFix"/>
            </swiper-item>
        </block>
    </swiper>
</view>

中间颜色尺寸数量

<view class="btn">
    <view class="nowPrice">¥{
  {good.nowPrice}}</view>
    <view class="oldPrice">
        <view class="old">¥{
  {good.oldPrice}}</view>
        <view classe="seckill"> 秒杀</view>
    </view>
</view>
<view class="title"> {
  {good.name}}</view>
<view class="hr"></view>
<block wx:if="{
  {good.coupon.length > 0}}">
    <view class="promotion">
        <view>领券</view>
        <block wx:for="{
  {good.coupon}}">
            <view class="item">{
  {item}}</view>
        </block>
    </view>
    <view class="hr"></view>
</block>
<block wx:if="{
  {good.promotion.length > 0}}">
    <view class="promotion">
        <view>促销</view>
        <block wx:for="{
  {good.promotion}}">
            <view class="item">{
  {item}}</view>
        </block>
    </view>
    <view class="hr"></view>
</block>
<view class="desc">已选
    <block wx:if="{
  {good.color.length > 0}}">
        {
  {good.color[0]}}
    </block>
    <block wx:if="{
  {good.size.length > 0}}">
        {
  {good.size[0]}}
    </block>
    ,1个
</view>
<view class="line"></view>
<block wx:if="{
  {good.color.length > 0 }}">
    <view class="condition">
        <text class="conditionName">颜色</text>
        <view class="tips">
            <block wx:for="{
  {good.color}}">
                <view wx:if="{
  {index ==0}}" class="tip select"> {
  {item}} </view>
                <view wx:else class="tip"> {
  {item}} </view>
            </block>
        </view>
    </view>
</block>
<block wx:if="{
  {good.size.length > 0}}">
    <view class="condition">
        <text class="conditionName">尺寸</text>
        <view class="tips">
            <block wx:for="{
  {good.size}}">
                <view wx:if="{
  {index ==0}}" class="tip select"> {
  {item}} </view>
                <view wx:else class="tip">{
  {item}} <